Condivisione della tecnologia

Selettori di stile CSS [spiegazione dettagliata] (inclusi ID, classe, tag, carattere jolly, attributo, pseudo-classe, pseudo-elemento, attributo di contenuto, figli, discendenti, fratelli, fratelli adiacenti, intersezione, unione e altri selettori)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Codice CSS Selettore di stile, utilizzato per selezionare elementi html nella pagina per aggiungere stili CSS.

Ordina per prestazioni di rendering da alta a bassa Seguito da:

ID Selettore #id

Seleziona gli elementi in base al loro attributo id, con distinzione tra maiuscole e minuscole

<p id="p1" >第一段</p>
  • 1
#p1{
  color: red;
}
  • 1
  • 2
  • 3

Ma il suo utilizzo è sconsigliato perché:

  • Il selettore id ha una priorità più alta ed è scomodo per reimpostare lo stile.
  • Il selettore id è utilizzato principalmente da JS

selettore di classe .class

Attraverso l'attributo class dell'elementostileIl nome della classe dell'elemento selezionato fa distinzione tra maiuscole e minuscole

Il selettore CSS più consigliato è che i selettori di classe hanno una semantica forte e sono facili da reimpostare gli stili.

<span class="important" >重点词汇</span>
  • 1
.important{
  color: red;
  font-weight: bold;
}
  • 1
  • 2
  • 3
  • 4

È possibile aggiungere più classi di stile allo stesso elemento, separate da spazi.

<span class="important big" >巨大的重点词汇</span>
  • 1
.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

selettore di tag 标签名

Seleziona gli elementi in base ai nomi dei tag, senza distinzione tra maiuscole e minuscole

<a href="https://www.baidu.com/" target="_blank" >百度</a>
  • 1
a {
  text-decoration: none; /* 无文本装饰(消除默认的下划线) */
}
  • 1
  • 2
  • 3

Non consigliato a causa delle scarse prestazioni del selettore di tag e degli elevati costi di manutenzione

selettore di caratteri jolly *

Seleziona tutti gli elementi html nella pagina tranne gli pseudo elementi. Viene spesso utilizzato per cancellare lo stile predefinito del browser, ma non è consigliato perché consuma prestazioni.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
  • 1
  • 2
  • 3
  • 4
  • 5

selettore di attributi [属性]

Seleziona gli elementi in base ai loro attributi e ai valori degli attributi. Gli attributi non fanno distinzione tra maiuscole e minuscole e i valori degli attributi fanno distinzione tra maiuscole e minuscole.

selettore di attributidescrivere
[attributo]Utilizzato per selezionare elementi con attributi specificati.
[attributo=valore]Utilizzato per selezionare elementi con attributi e valori specificati.
[attributo~=valore]Utilizzato per selezionare elementi i cui valori di attributo contengono il vocabolario specificato. È molto adatto per scenari che contengono più combinazioni di valori di attributo.
[attributo|=valore]Valore dell'attributo che inizia il selettore del frammento, il valore deve essere una parola intera.
[attributo^=valore]Corrisponde a ogni elemento il cui valore dell'attributo inizia con il valore specificato.
[attributo$=valore]Corrisponde a ogni elemento il cui valore dell'attributo termina con il valore specificato.
[attributo*=valore]Corrisponde a ogni elemento il cui valore di attributo contiene il valore specificato.

Selettore di pseudoclasse :状态名

Seleziona gli elementi in base ai loro diversi stati

同一个标签,不同的状态,有不同的样式,就叫做“伪类”
  • 1
Selettore di pseudoclasseesempioDescrizione di esempio
:attivoa:attivo Seleziona il collegamento attivo. (Quando il mouse fa clic sull'etichetta ma non la lascia andare)
:controllatoinput:controllatoSeleziona ciascuno selezionato<input> elemento.
:Disabilitatoinput:disabilitatoSeleziona ciascuno disabilitato<input> elemento.
:vuotop:vuotoSeleziona ogni elemento che non ha elementi figlio<p> elemento.
:abilitatoinput:abilitatoSeleziona ciascuno abilitato<input> elemento.
:Primogenitop:primo figlioSeleziona ogni elemento che è il primo figlio del suo genitore<p> elemento.
:primo-di-tipop:primo-di-tipoSeleziona il primo come genitore<p>elemento di ciascuno<p> elemento.
:messa a fuocoingresso:messa a fuocoScegli quello che si concentra<input> elemento.
:passare il mousea:passare il mouseSeleziona il collegamento su cui passi il mouse.
:in gammainput:in-intervalloSeleziona un valore con un intervallo specificato<input> elemento.
:non validoinput:non validoSeleziona tutto con valori non validi<input> elemento.
:lang(lingua)p:lang(it)Seleziona ciascun valore dell'attributo lang che inizia con "it"<p> elemento.
:ultimo bambinop:ultimo-figlioSeleziona ciascun elemento che è l'ultimo elemento figlio del relativo genitore<p> elemento.
:ultimo-di-tipop:ultimo-di-tipoSeleziona l'ultimo come genitore<p>elemento di ciascuno<p> elemento.
:collegamentoun collegamentoSeleziona tutti i collegamenti non visitati.
:non(selettore):non§Seleziona ciascuno di essi<p> elementi degli elementi.
:nth-bambino(N)p:n-esimo-bambino(2)Seleziona ogni secondo elemento figlio che ne è il genitore<p> elemento.
:n-esimo-ultimo-figlio(N)p:n-esimo-ultimo-figlio(2)Seleziona ogni secondo elemento figlio che è un genitore<p> Elementi, contando dall'ultimo elemento figlio.
:n-esimo-ultimo-di-tipo(N)p:n-esimo-ultimo-di-tipo(2)Seleziona il secondo come genitore<p>elemento di ciascuno<p>elementi, contando dall'ultimo elemento figlio
:n-esimo-di-tipo(N)p:n-esimo-di-tipo(2)Seleziona il secondo come genitore<p>elemento di ciascuno<p> elemento.
:solo-di-tipop:solo-di-tipoSeleziona l'unico che è il suo genitore<p>elemento di ciascuno<p> elemento.
:figlio unicop:figlio unicoSeleziona l'unico elemento figlio che ne è il genitore<p> elemento.
:opzionaleinput:facoltativoSeleziona senza l'attributo "richiesto".<input> elemento.
:fuori dal limiteinput:fuori intervalloSeleziona valori al di fuori dell'intervallo specificato<input> elemento.
:sola letturainput:sola letturaSeleziona quelli con l'attributo "sola lettura" specificato<input> elemento.
:leggere scrivereinput:lettura-scritturaSeleziona senza l'attributo "sola lettura".<input> elemento.
:necessarioinput:obbligatorioSeleziona quello con l'attributo "richiesto" specificato<input> elemento.
:radiceradiceSeleziona l'elemento radice dell'elemento.
:bersaglio#notizie:obiettivoSeleziona l'elemento #news attualmente attivo (fai clic sull'URL contenente il nome dell'ancora).
:validoinput:validSeleziona tutto con valori validi<input> elemento.
:visitatoa:visitatoSeleziona tutti i collegamenti visitati.

Utilizza selettori di pseudo-classi negli elenchi

Selettore di pseudoclasseSenso
li:n-esimo-bambino(2)Il secondo li
li:n-esimo-bambino(n)Tutte le cose
li:n-esimo-bambino(2n)Tutti i li con numeri pari
li:n-esimo-bambino(2n+1)Tutti i li dispari
li:n-esimo-bambino(-n+5)I primi 5 li
li:n-esimo-ultimo-figlio(-n+5)Gli ultimi 5 li
li:n-esimo-bambino(7n)Seleziona multipli di 7

n significa 0,1,2,3,4,5,6,7,8...(Non è valido quando n è inferiore a 1, perché n = 0 non verrà selezionato)

Utilizza selettori di pseudo-classi nelle tabelle