CSS pseudo-elementi
CSS pseudo-elemento è utilizzato per aggiungere alcuni selettori effetti speciali.
grammatica
sintassi pseudo-elemento:
classi CSS possono anche utilizzare gli pseudo-elementi:
: First-line pseudo-elemento
"First-line" elemento pseudo viene utilizzato per impostare uno stile speciale alla prima riga di testo.
Nel seguente esempio, il browser sarà basato su pseudo-elemento "first-line" secondo lo stile della prima riga di testo in formato elementi p:
Nota: "prima linea" elemento pseudo può essere utilizzato solo per gli elementi a livello di blocco.
NOTA: Le seguenti proprietà possono essere applicate al pseudo-elemento "first-line":
- proprietà dei font
- proprietà di colore
- proprietà dello sfondo
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- chiaro
: First-letter pseudo-elemento
"Prima lettera" pseudo-elemento viene utilizzato per impostare uno stile speciale alla prima lettera del testo:
Nota: "first-letter" elemento pseudo può essere utilizzato solo per gli elementi a livello di blocco.
NOTA: Le seguenti proprietà possono essere applicate al pseudo-elemento "first-letter":
- proprietà dei font
- proprietà di colore
- proprietà dello sfondo
- proprietà dei margini
- proprietà padding
- proprietà del bordo
- text-decoration
- vertical-align (solo se "float" è "none")
- text-transform
- line-height
- galleggiante
- chiaro
Gli pseudo-elementi e classi CSS
Gli pseudo-elementi possono essere combinati con le classi CSS:
<p class="article">A paragraph in an article</p>
L'esempio sopra farà tutto classe come la prima lettera dell'articolo comma diventa rosso.
Gli pseudo-elementi multipli
Una pluralità di pseudo-elementi possono essere combinati per l'uso.
Nell'esempio seguente, il primo paragrafo della lettera sarà visualizzato in rosso, la dimensione del carattere è xx-large. La prima riga del resto del testo sarà maiuscolo blu, e piccoli.
I rimanenti paragrafi di testo nella dimensione del font di default e il colore di visualizzazione:
Esempi
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
Prova »
CSS -: prima di pseudo-elemento
"Prima" pseudo-elemento può inserire nuovo contenuto di fronte al contenuto dell'elemento.
Il seguente esempio inserire un'immagine davanti ad ogni elemento <h1>:
CSS -: dopo pseudo-elemento
": Dopo" pseudo-elemento può inserire il nuovo contenuto dopo il contenuto dell'elemento.
Gli esempi che seguono inserire una foto dopo ogni elemento <h1>:
Tutti i CSS pseudo-classi / elementi
selettore | esempio | esempio spettacoli |
---|---|---|
: 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 |