Selettori CSS

Un selettore CSS è uno schema utilizzato per abbinare gli elementi del documento HTML. Le regole di stile associate verranno applicate agli elementi che corrispondono al modello del selettore.

Cos'è un selettore

Il selettore è uno dei aspetti più importanti del CSS, poiché viene utilizzato per selezionare gli elementi delle pagine web in modo da poter impostare lo stile. È possibile definire il selettore in molti modi.

Il selettore universale

Il selettore universale (usato*L'asterisco o l'asterisco (o l'asterisco) abbinano ogni singolo elemento della pagina. Se l'elemento di destinazione ha altre condizioni, il selettore universale può essere omesso. Questo selettore viene spesso utilizzato per rimuovere i margini e il riempimento di default degli elementi per test rapidi.

*　{
　　　　margin:　0;
　　　　padding:　0;
　　}

*Le regole di stile nel selettore verranno applicate a ogni elemento del documento.

Il selettore di tipo di elemento

Il selettore di tipo di elemento abbinerà ogni esempio di elemento nell'albero del documento al nome del tipo di elemento corrispondente.

p　{
　　　　color: blue;
　　}

pLe regole di stile nel selettore verranno applicate a<p>Ogni elemento del documento, e lo rende di colore blu, indipendentemente dalla sua posizione nell'albero del documento.

selettore ID

selettore ID viene utilizzato persingoloounicodefinire le regole di stile per l'elemento.

La definizione di un selettore ID è un trattino obliquo (#），seguiti dal valore dell'ID.

#error {
　　　　color: red;}

Questa regola di stile si applica aidelementi con l'attributo impostato il testo si presenta in rossoerror.

selettore della classe di classe

Il selettore della classe può essere utilizzato per selezionare gli elementi conclassqualsiasi elemento HTML con l'attributo. Tutti gli elementi con questa classe saranno formattati secondo le regole definite.

un punto esclamativo (.）seguiti dalla definizione della classe di valore seguente.

.blue {
　　　　color: blue;
　　　　　　}

Le regole di stile sopra elencate si applicano aclassIl testo di ogni elemento del documento con l'attributo impostato viene visualizzato in blublue。Puoi renderlo più specifico. Ad esempio:

p.blue {
　　　　color: blue;
　　　　}

stili delle regole del selettorep.bluesolo<p>impostareclasselementi con l'attributo impostato si presentano in blubluee non influenzano altri paragrafi.

Selettore discendente

Quando è necessario selezionare un elemento che è un discendente di un altro elemento, è possibile utilizzare questi selettori. Ad esempio, se si desidera localizzare solo quei punti di posizionamento contenuti in una lista non ordinata senza localizzare tutti gli elementi di posizionamento.

ul.menu li a {
　　　　text-decoration: none;
　　　　}
h1 em {
　　　　color: green;
　　　　}

stili delle regole del selettoreul.menu li asolo per<a>contenuta in un elemento con la classelista non ordinatache contengono quegli elementi, ossia gli elementi di collegamento.menue non influenzano altri link nel documento. Allo stesso modo,h1 emLe regole di stile nel selettore si applicano solo a<em>elementi contenuti all'interno di<h1>.

Selettore figlio

Il selettore figlio può essere utilizzato solo per selezionare quegli elementi che sono figli diretti di certi elementi. Il selettore figlio è composto da due o più selettori, separati da un segno maggiore (cioè>）separati. Ad esempio, è possibile utilizzare questi selettori per selezionare l'elemento di primo livello di una lista a più livelli.

ul > li {
　　　　list-style: square;
　　　　}
ul > li > ol {
　　　　list-style: none;
　　　　}

stili delle regole del selettoreul > lisolo per<li>come<ul>elementi che sono figli diretti degli elementi e non influenzano altri elementi della lista.

Selettore consecutivo di fratello

Il selettore consecutivo di livello equivalente può essere utilizzato per selezionare gli elementi同级. La sintassi del selettore è simile a: E1 + E2, dove E2 è il selettore di destinazione.

h1 + pnel seguente esempio del selettore<p>solo in<h1>e<p>l'elemento condivide lo stesso livello genitore nel albero del documento e<h1>immediatamente dopo di esso<p>In caso di selezione dell'elemento prima dell'elemento. Questo significa che solo ogni<h1>I paragrafi dopo il titolo hanno regole di stile associate.

h1 + p {
　　　　color: blue;
　　　　font-size: 18px;
　　　　}
ul.task + p {
　　　　color: #f0f;
　　　　text-indent: 30px;
　　　　}

Selettore di fratello universale

Il selettore同级 universale è simile al selettore同级 adiacente (E1 + E2), ma meno rigoroso. Il selettore同级 universale è composto da due semplici selettori, che sono composti dal trattino obliquo (〜carattere). Può essere scritto così: E1〜E2, dove E2 è il target del selettore.

I selettori nell'esempio seguente sono separati dah1 ∼ psceglierà questo<p>prima dell'elemento<h1>Tutti gli elementi, dove tutti gli elementi condividono lo stesso elemento genitore nel albero del documento.

h1 ∼ p {
　　　　color: blue;
　　　　font-size: 18px;
　　　　}
ul.task ∼ p {
　　　　color: #f0f;
　　　　text-indent: 30px;
　　　　}

Ci sono altri selettori, come i selettori di attributo, i pseudo-classe, i pseudo-elementi. Ne discuteremo nei prossimi capitoli.

Selettori raggruppati

I selettori multipli nello stylesheet condividono di solito le stesse dichiarazioni di regole di stile. Puoi raggrupparli in una lista separata da virgola per ridurre al minimo il codice nello stylesheet. Può anche prevenire che tu ripeta le stesse regole di stile più volte.

h1 {
　　　　font-size: 36px;
　　　　font-weight: normal;
　　　}
h2 {
　　　　font-size: 28px;
　　　　font-weight: normal;
　　　}
h3 {
　　　　font-size: 22px;
　　　　font-weight: normal;
　　　}

Come puoi vedere nell'esempio sopra, le stesse regole di stilefont-weight: normal;è condiviso tramite la selezioneh1,h2eh3Pertanto, può essere diviso in una lista separata da virgola, come segue:

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}