Selettore di attributo CSS

I selettori di attributo impostano lo stile sugli elementi HTML con attributi specifici. Puoi impostare lo stile sugli elementi HTML che hanno attributi specifici, non solo sugli attributi class e id.

Scopri i selettori di attributo

Il selettore di attributo CSS offre un metodo semplice e potente per applicare stili a elementi HTML specificiAttributo o valore di attributoLa sua presenza applicherà lo stile agli elementi HTML.

Puoi creare un selettore di attributo mettendo l'attributo (opzionalmente con un valore) tra parentesi quadre. Puoi anche metterlo davanti a unSelettore di tipo di elemento.

Le seguenti sezioni descrivono i selettori di attributo più comuni.

Selettore [attribute] CSS

Questa è la forma più semplice del selettore di attributo, se l'attributo fornito esiste, viene applicata la regola di stile all'elemento. Ad esempio, possiamo applicare lo stile seguente agli elementi che hanno un attributo:

[title]　{
　　　　color: blue;
}

Il selettore nell'esempio precedente corrisponde a tutti gli elementi con l'attributo title.

Puoi anche limitare l'ambito di ricerca di un selettore di attributo dopo il selettore di tipo di elemento, come nell'esempio seguente:

abbr[title] {
　　　　color: red;
}

Il selettore abbr[title] corrisponde solo aGli elementi con l'attributo title, quindi corrisponde agli abbreviati, ma non agli elementi con l'attributoancoraelemento title.

Selettore CSS [attribute="value"]

Puoi usare l'operatore = per fare corrispondere l'attr选择器 a qualsiasi elemento con un valore di attributo uguale al valore dato:

input[type="submit"]　{
　　　　border: 1px solid green;
}

Il selettore nell'esempio precedente corrisponde a quelli con input Tutti gli elementi con l'attributo value equal to submit.

Selettore CSS [attribute〜="value"]

Puoi usare l'operatore ~= per fare corrispondere l'attr选择器 con i valori degli attributi che sonoseparati da spaziQualsiasi elemento della lista di valori corrisponde a uno dei valori specificati: valori separati da spazi

[class~="warning"] {
　　　　color:　#fff;
　　　　background:　red;
}

Questo selettore corrisponde a qualsiasi elemento HTML con l'attributo class che contiene valori separati da spazi, uno dei quali è warning. Ad esempio, l'elemento con il valore di classe corrisponde a warning, alert warning, ecc.

Selettore CSS [attribute |="value"]

Puoi usare l'operatore |= per fare corrispondere l'attr选择器 con gli attributi che iniziano con un valore specificatoseparati da trattiniQualsiasi elemento della lista di valori corrisponde:

[lang|=en] {
　　　　color:　#fff;
　　　　background: blue;
}

Il selettore nell'esempio precedente corrisponde a quelli conlangTutti gli elementi con l'attributo che contiene un valore iniziante con en, indipendentemente da eventuali trattini e altri caratteri successivi. In altre parole, i suoi elementi corrispondono all'attributo lang con valori en, en-US, en-GB, ecc., ma non possono essere US-en, GB-en.

Selettore CSS [attribute ^="value"]

Puoi usare l'operatore ^= per fare corrispondere l'attr选择器 con i valori degli attributiconvalore specificatoInizialeQualsiasi elemento corrisponde. Non deve essere una parola completa.

a[href^="http://"] {
　　　　background: url("external.png") 100% 50% no-repeat;
　　　　padding-right: 15px;
}

Il selettore nell'esempio precedente individua tutti i link esterni e aggiunge un'icona piccola che indica che apriranno in una nuova scheda o finestra.

Selettore CSS [attribute $="value"]

Allo stesso modo, puoi usare l'operatore $= per selezionare i valori degli attributiconvalore specificatoche termina conTutti gli elementi. Non deve essere una parola completa.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50%　no-repeat;
　　　　padding-left:　20px;
}

Questo selettore nell'esempio selezionaTutti gli elementi che linkano a documenti PDF e aggiungono un piccolo'icona PDF per fornire suggerimenti agli utenti sui link.

Selettore CSS [attribute *="value"]

Puoi usare l'operatore *= per far corrispondere il selettore di attributo a tutti gli elementi che hanno un valore di attributo contenente il valore specificato.

[class*="warning"]　{
　　　　color:　#fff;
　　　　background:　red;
}

Questo selettore nell'esempio corrisponde a tutti gli elementi HTML che contengono l'attributo classvalue con avviso. Ad esempio, corrisponde agli elementi con valore di classe avviso, alert avviso, alert-warning o alert_warning ecc.

Stilizzare i moduli con selettore di attributo

Selettore di attributo per quelli senzaclasso lo stile dello stile è particolarmente utileid：

input[type="text"],　input[type="password"]　{
　　　　width:　150px;
　　　　display:　block;
　　　　margin-bottom:　10px;
　　　　background:　yellow;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px　solid　#804040;
　　　　background:　#ff8040;
}