Selettori di attributi CSS
- [Attributo] Selettore
- [attributo = "value"] selettore
- [attributo ~ = "value"] selettore
- [attributo | = "value"] selettore
- [attributo^= "value"] selettore
- [Attributo $ = "Value"] Selettore
- [attributo*= "value"] selettore
Ognuno di questi è spiegato in dettaglio di seguito.
[Attributo] Selettore
Ai fini degli elementi di styling che hanno un attributo particolare, viene utilizzato il selettore [attributo].
Sintassi
elemento [attributo]costo dell'immobile;
O,
[attributo]costo dell'immobile;
Esempio
Diciamo che vuoi modellare tutti gli elementi con attributo Al, Quindi utilizzare il selettore [attributo] nel modo seguente.
Html
Questa è una voce
Questo è un paragrafo.
Nel codice sopra, abbiamo creato due elementi
E
. IL
è stata assegnata una classe di attributi, mentre il
A elemento è stato assegnato un attributo alt.
CSS
[alt]Font in stile: corsivo;
Ora, usando il selettore [attributo] stiamo accontentando solo quegli elementi con l'attributo alt. In questo caso, poiché solo il
L'elemento ha l'attributo Alt, pertanto, la regola dello stile verrà applicata solo al paragrafo.
Produzione
Gli elementi con attributo alt sono stati disegnati.
[attributo = "value"] selettore
ATTTIBUTS ha un certo valore, quindi, al fine di modellare un elemento con un determinato attributo e valore, utilizziamo il selettore [attributo = "value"].
Sintassi
elemento [attributo = "value"]costo dell'immobile;
O,
[attributo = "value"]costo dell'immobile;
Esempio
Supponiamo di voler modellare alcuni elementi con un attributo e un valore particolari. Segui l'esempio di seguito.
Html
Qui abbiamo creato un campo di input, nonché un pulsante. Entrambi gli elementi hanno un attributo in base alla classe di nome, tuttavia, i valori di entrambi gli attributi della classe sono diversi.
CSS
[class = "input"]Background-color: Pink;
Font-size: 20px;
[class = "btn"]
imbottitura: 3px;
bordo: 1px nero solido;
Nel codice sopra, stiamo usando il selettore [attributo = "value"] per modellare sia il campo di input che il pulsante.
Produzione
Entrambi gli elementi sono stati in stile con successo.
[attributo ~ = "value"] selettore
Ci sono alcuni attributi che hanno un elenco di valori separati dallo spazio, ad esempio, class = "Hello World". Ora per modellare elementi con tali valori di attributo, viene utilizzato il selettore [attributo ~ = "valore"]. Stiles elementi il cui valore di attributo corrisponde a uno di questi valori.
Sintassi
elemento [attributo ~ = "value"]costo dell'immobile;
O,
[attributo ~ = "valore"]costo dell'immobile;
Esempio
L'esempio seguente dimostra il funzionamento del selettore in discussione.
Html
Questa è una voce
Questo è un paragrafo.
Questo è un altro paragrafo.
Nel codice sopra, abbiamo definito tre elementi. Ognuno di questi elementi ha lo stesso attributo, tuttavia, valori diversi.
CSS
[class ~ = "head"]colore viola;
[class ~ = "para"]
Font-size: 20px;
Font in stile: corsivo;
Usando il selettore [attributo ~ = "value"], stiamo accontentando l'intestazione e i paragrafi. Come puoi vedere che il valore dell'attributo di ciascuno
L'elemento è un elenco di valori separati dallo spazio, tuttavia, la parola chiave "para" esiste in entrambi i valori, pertanto le regole di stile definite per il valore dell'attributo "para" verranno applicate a entrambi i paragrafi.
Produzione
Il selettore [attributo ~ = "valore"] funziona correttamente.
[attributo | = "value"] selettore
Ai fini degli elementi di styling con attributi che hanno valori separati dal trattino, viene utilizzato il selettore [Attributo | = "Value"].
Sintassi
elemento [attributo | = "value"]costo dell'immobile;
O,
[attributo | = "value"]costo dell'immobile;
Esempio
Segui l'esempio di seguito per comprendere il funzionamento del selettore [Attributo | = "Value"].
Html
Questa è una voce
Questo è un paragrafo.
Questo è un altro paragrafo.
IL
e il primo
L'elemento ha un valore di attributo separato dal trattino, tuttavia, il valore dell'attributo dell'ultimo
L'elemento non è separato da un trattino.
CSS
[class | = "linux"]Background-color: bisque;
Font in stile: corsivo;
Ora, questo selettore applicherà solo le regole di stile all'intestazione e al primo paragrafo perché solo questi due elementi hanno un valore di attributo che è separato da un trattino.
Produzione
Le regole di stile sono state applicate
e il primo
elemento.
[attributo^= "value"] selettore
Al fine di modellare elementi con attributi con un valore iniziale specifico, il selettore [Attributo^= "Value"]. Il valore non è necessariamente l'intera parola.
Sintassi
elemento [attributo^= "value"]costo dell'immobile;
O,
[attributo^= "valore"]costo dell'immobile;
Esempio
Utilizzeremo lo stesso esempio utilizzato nella sezione sopra per cancellare il concetto del selettore [Attributo^= "Value"].
Html
Questa è una voce
Questo è un paragrafo.
Questo è un altro paragrafo.
Si noti che ciascuno degli elementi sopra ha un valore di attributo che inizia con la parola Linux.
CSS
[class ^= "linux"]Background-color: bisque;
Font in stile: corsivo;
Ora questo selettore modellerà tutti gli elementi perché ognuno di essi ha lo stesso valore di attributo iniziale.
Produzione
Il selettore [attributo ^= "value"] funziona correttamente.
[Attributo $ = "Value"] Selettore
Al fine di modellare elementi con attributi con un particolare valore finale, il selettore [attributo $ = "value"]. Il valore non è necessariamente l'intera parola.
Sintassi
elemento [attributo $ = "value"]costo dell'immobile;
O,
[attributo $ = "value"]costo dell'immobile;
Esempio
Segui l'esempio seguente per comprendere il funzionamento di questo selettore di attributi.
Html
Un po 'di testo.Un po 'di testo.
Un po 'di testo.
Qui abbiamo creato tre elementi Div. Ai primi due elementi Div è stato assegnato un valore di attributo che termina con la parola chiave "Div".
CSS
[class $ = "div"]Background-color: beige;
imbottitura: 10px;
Font-size: 20px;
Font in stile: corsivo;
L'attributo $ = "valore"] applicherà le regole di stile sopra solo ai primi due elementi Div.
Produzione
I primi due elementi Div sono stati disegnati utilizzando il selettore [Attributo $ = “Value].
[attributo*= "value"] selettore
Ai fini di styling di tutti gli elementi con valori di attributo con una parola chiave specifica, viene utilizzato il selettore [Attributo *= "Value"].
Sintassi
elemento [attributo *= "value"]costo dell'immobile;
O,
[attributo *= "value"]costo dell'immobile;
Esempio
Supponiamo di voler modellare alcuni elementi usando il selettore [attributo*= "value"]. Segui il codice qui sotto.
Html
Questo è un paragrafo.
Questo è un altro paragrafo.
Ne abbiamo creati due
elementi con valori di attributo "para1" e "para2" rispettivamente.
CSS
[class *= "ar"]Background-color: bisque;
Font in stile: corsivo;
Questo selettore di attributi rileverà qualsiasi valore di attributo con la parola chiave "AR" e applicherà le regole di stile sopra su quell'elemento.
Produzione
Il selettore [attributo*= "value"] funziona correttamente.
Conclusione
È possibile modellare elementi HTML che hanno determinati attributi o valori di attributi. Esistono un totale di sette selettori di attributi CSS che sono: [attributo] selettore, [attributo = "valore"], [attributo ~ = "value"] selettore, [attributo | = "value"] selettore, [attributo ^= " value ”] selettore, [attributo $ =“ valore] selettore e [attributo *= “value”] selettore. Questi selettori hanno uno scopo diverso di cui abbiamo discusso in dettaglio in questo post insieme a esempi pertinenti.