Selettore di attributo CSS

Impostazione dello stile degli elementi HTML con attributi specifici

Possiamo impostare lo stile degli elementi HTML con attributi specifici o valori di attributi.

Selettore [attribute] CSS

Il selettore [attribute] seleziona l'elemento con l'attributo specificato.

Esempio: il seguente selettore seleziona tutti gli elementi <a> con l'attributo target;

Esempio

a[target] {
  background-color: yellow;
}

Prova a farlo tu stesso

Selettore [attribute="value"] CSS

Il selettore [attribute="value"] seleziona l'elemento con l'attributo specificato e il valore.

Esempio: il seguente selettore seleziona tutti gli elementi <a> con l'attributo target="_blank":

Esempio

a[target="_blank"] { 
  background-color: yellow;
}

Prova a farlo tu stesso

Selettore [attribute~="value"] CSS

Il selettore [attribute~="value"] seleziona gli elementi con l'attributo che contiene la parola specificata.

Esempio: il seguente selettore seleziona tutti gli elementi con l'attributo title che contiene la parola "flower":

Esempio

[title~="flower"] {
  border: 5px solid yellow;
}

Prova a farlo tu stesso

L'esempio sopra corrisponde agli elementi con i seguenti attributi: title="flower", title="summer flower" e title="flower new", ma non corrisponde a: title="my-flower" o title="flowers".

Selettore [attribute|="value"] CSS

[attribute|="value"] Selettore utilizzato per selezionare l'elemento con l'attributo specificato che inizia con il valore.

Esempio: il selettore选取 class 属性以 "top" iniziano tutti gli elementi：

Note:Il valore deve essere una parola completa o singola, ad esempio class="top" o seguita da trattino, ad esempio class="top-text".

Esempio

[class|="top"] {
  background: yellow;
}

Prova a farlo tu stesso

Selettore [attribute^="value"] CSS

Il selettore [attribute^="value"] viene utilizzato per selezionare gli elementi con un attributo che inizia con un valore specifico.

Esempio: il selettore选取 class 属性以 "top" iniziano tutti gli elementi：

Suggerimento:Il valore non deve essere una parola completa!

Esempio

[class^="top"] {
  background: yellow;
}

Prova a farlo tu stesso

Selettore [attribute$="value"] CSS

Il selettore [attribute$="value"] viene utilizzato per selezionare gli elementi con un attributo che termina con un valore specifico.

Esempio: il selettore选取 class 属性以 "test" terminante tutti gli elementi：

Suggerimento:Il valore non deve essere una parola completa!

Esempio

[class$="test"] {
  background: yellow;
}

Prova a farlo tu stesso

Selettore [attribute*="value"] CSS

Il selettore [attribute*="value"]选取属性值包含指定词的元素。

Esempio: il selettore选取 class 属性包含 "te" 的所有元素：

Suggerimento:Il valore non deve essere una parola completa!

Esempio

[class*="te"] {
  background: yellow;
}

Prova a farlo tu stesso

Impostare lo stile del modulo

Se devi impostare uno stile per un modulo senza class o id, i selettori di attributo sono molto utili:

Esempio

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Prova a farlo tu stesso

Suggerimento:Visita il nostro Guida CSS per i moduli，Per ulteriori informazioni su come impostare lo stile dei moduli CSS, consulta la nostra guida.

Tutti i selettori di attributo CSS

Selettore Esempio Esempio di descrizione
[attribute] [target] Seleziona tutti gli elementi con l'attributo target.
[attribute=value] [target=_blank] Seleziona tutti gli elementi con l'attributo target="_blank".
[attribute~=value] [title~=flower] Seleziona tutti gli elementi con l'attributo title che contiene la parola "flower".
[attribute|=value] [lang|=en] Seleziona tutti gli elementi con l'attributo lang che inizia con "en".
[attribute^=value] a[href^="https"] Seleziona ogni elemento <a> con l'attributo href che inizia con "https".
[attribute$=value] a[href$=".pdf"] Seleziona ogni elemento <a> con l'attributo href che termina con ".pdf".
[attribute*=value] a[href*="codew3c"] Seleziona ogni elemento <a> che ha un valore di attributo href contenente la sottostringa "codew3c".

Leggi di Approfondimento

Libri di Approfondimento:Spiegazione Selettore Proprietà CSS