Elementi di stile HTML con attributi specifici
E 'possibile per lo stile elementi HTML che hanno attributi specifici o valori degli attributi.
CSS [attributo] Selettore
Il [attribute] selettore viene usato per selezionare gli elementi con un attributo specificato.
L'esempio seguente seleziona tutti <a> elementi con un attributo target:
CSS [attributo = "valore"] Selettore
Il [attribute="value"] selettore viene utilizzato per selezionare gli elementi con un attributo e il valore specificati.
L'esempio seguente seleziona tutti <a> elementi con un target="_blank" attributo:
CSS [attributo ~ = "valore"] Selettore
Il [attribute~="value"] selettore viene usato per selezionare gli elementi con un valore di attributo che contiene una parola specificata.
L'esempio seguente seleziona tutti gli elementi con un attributo titolo che contiene un elenco separato da spazi di parole, uno dei quali è " flower ":
L'esempio precedente corrisponderà elementi con title="flower", title="summer flower" , e title="flower new" , ma non title="my-flower" o title="flowers" .
CSS [attributo | = "valore"] Selettore
Il [attribute|="value"] selettore viene utilizzato per selezionare gli elementi con l'attributo specificato che iniziano con il valore specificato.
L'esempio seguente seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top" :
Nota: il valore deve essere una parola intera, sia da solo, come class="top" , o seguito da un trattino ( - ) , come class="top-text" !
CSS [attributo ^ = "valore"] Selettore
Il [attribute^="value"] selettore viene utilizzato per selezionare gli elementi il cui valore dell'attributo inizia con un valore specificato.
L'esempio seguente seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top" :
Nota: Il valore non deve essere una parola intera!
CSS [attributo $ = "valore"] Selettore
Il [attribute$="value"] selettore viene utilizzato per selezionare gli elementi il cui valore di attributo termina con un valore specificato.
L'esempio seguente seleziona tutti gli elementi con un valore di attributo di classe che si conclude con "test" :
Nota: Il valore non deve essere una parola intera!
CSS [attributo * = "valore"] Selettore
Il [attribute*="value"] selettore viene utilizzato per selezionare gli elementi il cui valore di attributo contiene un valore specificato.
L'esempio seguente seleziona tutti gli elementi con un valore di attributo classe che contiene "te" :
Nota: Il valore non deve essere una parola intera!
Forme styling
I selettori di attributo può essere utile per le forme di stile senza class o ID :
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 tu stesso " Suggerimento: Visita il nostro Tutorial CSS Forms per ulteriori esempi su come lo stile forme con i CSS.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
Altri esempi di CSS selettori
Utilizza il nostro CSS selettore del tester per dimostrare i diversi selettori.
Per un riferimento completo di tutti i selettori CSS, si prega di visitare il nostro CSS selettori di riferimento .