CSS pseudo-classi
CSS selettori di pseudo-classe vengono utilizzati per aggiungere alcuni effetti speciali.
grammatica
sintassi Pseudo-classe:
classi CSS possono anche utilizzare pseudo-classe:
classi pseudo ancoraggio
supporto CSS nei browser, diverso stato del collegamento può essere visualizzato in diversi modi
Esempi
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Prova »
Nota: la definizione CSS, a: hover deve essere collocato in un: link e una: dopo visitato, è efficace.
Nota: la definizione CSS, a: active deve essere collocato in un: hover dopo, per essere efficace.
Nota: Il nome dellapseudo-classe non è case-sensitive.
Le pseudo-classi e classi CSS
Le pseudo-classi possono essere utilizzati in combinazione con le classi CSS:
<a class="red" href="css-syntax.html"> CSS Sintassi </a>
Se il link qui sopra ad esempio è stata visitata, verrà visualizzato in rosso.
CSS -: in primo luogo - bambino pseudo-classe
È possibile utilizzare il: first-child pseudo-classe seleziona il primo elemento figlio
Nota: Devi essere dichiarati nella precedente versione di IE8 <! DOCTYPE> , Come questo: first-child abbia effetto.
Far corrispondere il primo elemento <p>
Nel seguente esempio, il selettore seleziona l'elemento <p> come il primo figlio di eventuali elementi elemento:
Esempi
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Prova »
Hanno tutte <p> elementi nel primo elemento <i>
Il primo <i> elemento nel seguente esempio, il selettore corrisponde a qualsiasi <p> elemento:
Esempi
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Prova »
<H2 hanno tutte come primo elemento figlio dell'elemento <p> in tutta la <i> elementi:
Esempi
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Prova »
CSS -: Lang pseudo-classe
: Lang pseudo-classe ti permette di avere la possibilità per le diverse lingue definiscono le regole speciali
Nota: IE8 deve dichiarare il <! DOCTYPE> Per sostenere; lang pseudo-classe.
Nel seguente esempio ,: lang tipo di classe valore di attributo di q non definizioni degli elementi preventivi:
Esempi
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Prova »
Altri esempi
Aggiungere stili diversi per collegamenti ipertestuali
Questo esempio dimostra come aggiungere altri stili di collegamenti ipertestuali.
Uso: focus
Questo esempio dimostra come utilizzare il: focus pseudo-classe.
Tutti i CSS pseudo-classi / elementi
| selettore | esempio | esempio spettacoli |
|---|---|---|
| : selezionata | input:checked | Tutto elemento del modulo selezionato |
| : disabilitato | input:disabled | Selezionare tutti gli elementi del modulo disabili |
| : vuoto | p:empty | Selezionare tutti gli elementi p hanno figli |
| : abilitato | input:enabled | Selezionare tutti gli elementi del modulo abilitati |
| : First-of-type | p:first-of-type | Selezionare ogni elemento principale è il primo elemento secondario degli elementi p p |
| : In-range | input:in-range | Selezionare i valori degli elementi all'interno di un intervallo specificato |
| : non valido | input:invalid | Selezionare tutti gli elementi non validi |
| : Last-child | p:last-child | Selezionare tutti gli elementi p nell'ultimo elemento figlio |
| : Last-of-type | p:last-of-type | Selezionare ogni elemento p è l'ultimo elemento di un elemento padre p |
| : Non (selettore) | :not(p) | Selezionare tutti gli elementi diversi dal p |
| : Nth-child (n) | p:nth-child(2) | Selezionare tutti gli elementi p nel secondo sotto-elemento |
| : Nth-last-child (n ) | p:nth-last-child(2) | Selezionare tutti gli elementi del inverso di p secondo elemento bambino |
| : Nth-last-of-type (n) | p:nth-last-of-type(2) | Selezionare tutti gli elementi p è il reciproco del secondo sottoelemento p |
| : Nth-of-type (n ) | p:nth-of-type(2) | Selezionare tutti gli elementi p nella seconda sotto-elemento per la p |
| : Only-of-type | p:only-of-type | Seleziona tutto solo un elemento figlio di elementi p |
| : Solo-bambino | p:only-child | Seleziona tutto solo un elemento figlio di elementi p |
| : opzionale | input:optional | Scegliere Non attributo "obbligatorio" dell'elemento |
| : Out-of-range | input:out-of-range | Selezionare elemento di attributo di fuori del campo di valori specificato |
| : Sola lettura | input:read-only | Selezionare l'attributo di sola lettura degli attributi degli elementi |
| : Lettura-scrittura | input:read-write | Scegliere di non attributo di sola lettura delle proprietà degli elementi |
| : necessaria | input:required | Scegliere "necessaria" attributo specifica le proprietà degli elementi |
| : root | root | Selezionare l'elemento radice del documento |
| : bersaglio | #news:target | Selezionare elemento l'attività corrente #news (clicca su un URL che contiene il nome dell'ancoraggio) |
| : valida | input:valid | Selezionare tutti i valori validi per le proprietà |
| : Link | a:link | Selezionare tutti i collegamenti non visitati |
| : visited | a:visited | Selezionare tutti i link visitati |
| : attiva | a:active | Select è un collegamento attivo |
| : hover | a:hover | Mettere il mouse sul stato del collegamento |
| : focus | input:focus | Dopo aver selezionato l'elemento di input ha il focus |
| : First-letter | p:first-letter | Selezionare la prima lettera di ogni elemento <p> |
| : First-line | p:first-line | Selezionare la prima riga di ogni elemento <p> |
| : First-child | p:first-child | <] P> selettore elemento corrisponde a qualsiasi elemento appartenente al primo elemento figlio |
| : prima | p:before | Inserisci contenuto prima di ogni elemento <p> |
| : dopo | p:after | Inserisci contenuto dopo ogni <p> elemento |
| : Lang (lingua) | p:lang(it) | lang selezione attributo <p> per un valore di partenza |