Il miglior tutorial CSS pseudo-classi Nel 2024, in questo tutorial puoi imparare grammatica,classi pseudo ancoraggio,Esempi,Le pseudo-classi e classi CSS,CSS -: in primo luogo - bambino pseudo-classe,Far corrispondere il primo elemento <p>,Esempi,Hanno tutte <p> elementi nel primo elemento <i>,Esempi,Esempi,CSS -: Lang pseudo-classe,Esempi,Altri esempi,Tutti i CSS pseudo-classi / elementi,
CSS selettori di pseudo-classe vengono utilizzati per aggiungere alcuni effetti speciali.
sintassi Pseudo-classe:
classi CSS possono anche utilizzare pseudo-classe:
supporto CSS nei browser, diverso stato del collegamento può essere visualizzato in diversi modi
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 possono essere utilizzati in combinazione con le classi CSS:
Se il link qui sopra ad esempio è stata visitata, verrà visualizzato in rosso.
È 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.
Nel seguente esempio, il selettore seleziona l'elemento <p> come il primo figlio di eventuali elementi elemento:
Il primo <i> elemento nel seguente esempio, il selettore corrisponde a qualsiasi <p> elemento:
: 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:
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.
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 |