Nwlapcug.com


CSS di differenza tra le pseudo-classi e pseudo-elementi

In CSS, o fogli di stile CSS, è possibile applicare stili, che vanno dal carattere colori e volti ai bordi immagini di sfondo o colori..--per uno o più elementi della pagina. Si definiscono gli stili per ogni elemento utilizzando il selettore associato. In alcuni casi, è possibile applicare comportamenti agli elementi HTML con gli pseudo-elementi o pseudo-classi, che solo interessare alcuni selettori e sono funzionalmente identici.

Selettori CSS

In genere, la selezione di un elemento CSS è lo stesso come il tag HTML. Ad esempio, per applicare uno stile a tutti i paragrafi, che utilizzano il tag "< p >", si utilizzerà "p" come il selettore, come nell'esempio seguente che trasforma il colore del carattere nero:

p
{
colore: nero;
}

Se si desidera modificare alcuni ma non tutti i paragrafi, è possibile creare una classe che si applica a più selettori e utilizza una classe per diversi selettori. Ad esempio, per visualizzare alcune parti della pagina Web con testo di colore rosso, è possibile creare la classe Segui denominata "rosso".

. Red
{
colore: rosso;
}

Quando si specifica la classe come "red" nel codice HTML (ad esempio "< classe p =" rosso">"), il colore verrà visualizzato in rosso.

CSS pseudo

In CSS, una pseudo-elemento o pseudo-classe applica un effetto di solo alcune parti di un selettore utilizzando la sintassi "selettore: pseudo-elemento". Entrambi gli stili CSS pseudo utilizzano la stessa sintassi, quindi è impossibile distinguerli semplicemente identificandoli. Inoltre, sia gli pseudo-elementi e pseudo-classi automaticamente applicano ad una parte specifica dello stato di un elemento del selettore/HTML. Ad esempio, pseudo-l'elemento di prima lettera si applica solo alla prima lettera di un nuovo paragrafo, e non è necessario applicare una classe aggiuntiva ai paragrafi. Allo stesso modo, è possibile applicare effetti a un collegamento attivo, cliccato, un passaggio del mouse link o collegamento visitato con pseudo-classes/elementi.

Utilizzi comuni

Ci sono diversi elementi pseudo standard o classi. Ad esempio, è possibile applicare un effetto specifico per una prima lettera o un paragrafo, simile all'effetto di una prima linea di un capitolo in alcuni libri, con la prima lettera pseudo elemento utilizzando la seguente sintassi:

p:First-lettera
{
font-size: xx-grande;
}

In questo esempio, la tua prima lettera apparirà molto più grande rispetto al testo che lo segue, contraddistingue visivamente. Una pseudo-classe simile, "prima linea" colpisce l'intera prima riga di un paragrafo. Oltre a questo, pseudo-classi di ancoraggio come "un: hover" si riferiscono solo ai collegamenti in stati specifici (ad esempio essendo aleggiava). È anche possibile modificare gli elementi prima (o dopo) un elemento specifico con il ": prima" (o ": dopo") pseudo-elemento.

Considerazioni

Anche se non ci sono differenze significative tra gli pseudo-elementi e pseudo-classi nei CSS, sorgere alcuni problemi quando si tratta di pseudo CSS. Ad esempio, pseudo-classi non sono case sensitive, quindi è possibile salvare sforzo lasciando loro minuscoli nel tuo foglio di stile. Inoltre, secondo il sito web tech W3School, è necessario utilizzare l'ordine corretto quando si lavora con più di one.anchor pseudo classi. Ad esempio "un: hover" deve seguire "un: link" e "un: visitati" per visualizzare correttamente gli attributi al passaggio del mouse e "un: attivo" deve essere pseudo-l'elemento finale di questa serie nel tuo foglio di stile. Infine, quando si utilizza la pseudo-elelement "prima linea", la prima riga dipende dove il browser crea un'interruzione di riga e si differenzia in base alle dimensioni di schermo e browser.