le mie informazioni di contatto
Posta[email protected]
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>
#p1{
color: red;
}
Ma il suo utilizzo è sconsigliato perché:
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>
.important{
color: red;
font-weight: bold;
}
È possibile aggiungere più classi di stile allo stesso elemento, separate da spazi.
<span class="important big" >巨大的重点词汇</span>
.important {
color: red;
font-weight: bold;
}
.big {
font-size: 60px;
}
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>
a {
text-decoration: none; /* 无文本装饰(消除默认的下划线) */
}
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;
}
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 attributi | descrivere |
---|---|
[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
同一个标签,不同的状态,有不同的样式,就叫做“伪类”
Selettore di pseudoclasse | esempio | Descrizione di esempio |
---|---|---|
:attivo | a:attivo | Seleziona il collegamento attivo. (Quando il mouse fa clic sull'etichetta ma non la lascia andare) |
:controllato | input:controllato | Seleziona ciascuno selezionato<input> elemento. |
:Disabilitato | input:disabilitato | Seleziona ciascuno disabilitato<input> elemento. |
:vuoto | p:vuoto | Seleziona ogni elemento che non ha elementi figlio<p> elemento. |
:abilitato | input:abilitato | Seleziona ciascuno abilitato<input> elemento. |
:Primogenito | p:primo figlio | Seleziona ogni elemento che è il primo figlio del suo genitore<p> elemento. |
:primo-di-tipo | p:primo-di-tipo | Seleziona il primo come genitore<p>elemento di ciascuno<p> elemento. |
:messa a fuoco | ingresso:messa a fuoco | Scegli quello che si concentra<input> elemento. |
:passare il mouse | a:passare il mouse | Seleziona il collegamento su cui passi il mouse. |
:in gamma | input:in-intervallo | Seleziona un valore con un intervallo specificato<input> elemento. |
:non valido | input:non valido | Seleziona 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 bambino | p:ultimo-figlio | Seleziona ciascun elemento che è l'ultimo elemento figlio del relativo genitore<p> elemento. |
:ultimo-di-tipo | p:ultimo-di-tipo | Seleziona l'ultimo come genitore<p>elemento di ciascuno<p> elemento. |
:collegamento | un collegamento | Seleziona 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-tipo | p:solo-di-tipo | Seleziona l'unico che è il suo genitore<p>elemento di ciascuno<p> elemento. |
:figlio unico | p:figlio unico | Seleziona l'unico elemento figlio che ne è il genitore<p> elemento. |
:opzionale | input:facoltativo | Seleziona senza l'attributo "richiesto".<input> elemento. |
:fuori dal limite | input:fuori intervallo | Seleziona valori al di fuori dell'intervallo specificato<input> elemento. |
:sola lettura | input:sola lettura | Seleziona quelli con l'attributo "sola lettura" specificato<input> elemento. |
:leggere scrivere | input:lettura-scrittura | Seleziona senza l'attributo "sola lettura".<input> elemento. |
:necessario | input:obbligatorio | Seleziona quello con l'attributo "richiesto" specificato<input> elemento. |
:radice | radice | Seleziona l'elemento radice dell'elemento. |
:bersaglio | #notizie:obiettivo | Seleziona l'elemento #news attualmente attivo (fai clic sull'URL contenente il nome dell'ancora). |
:valido | input:valid | Seleziona tutto con valori validi<input> elemento. |
:visitato | a:visitato | Seleziona tutti i collegamenti visitati. |
Selettore di pseudoclasse | Senso |
---|---|
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)
tr:nth-child(odd):
Corrisponde alle righe 1, 3 e 5 della tabella, che equivale atr:nth-child(2n+1)
。tr:nth-child(even)
: corrisponde alle righe 2, 4 e 6 della tabella, che equivale atr:nth-child(2n)
。Utilizzare:nth-child() per implementare strisce zebrate, allineamento dei bordi, evidenziazione dell'elenco di intervalli specificato e layout adattivo dell'elenco dinamico
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122089484
I CSS implementano la visualizzazione e l'occultamento dinamico (l'uso meraviglioso di :checked e :target)
Italiano: https://blog.csdn.net/weixin_41192489/article/details/126267866
Utilizzo: destinazione per espandere ulteriormente, comprimere e cambiare schedaItaliano: https://blog.csdn.net/weixin_41192489/article/details/121969768
Utilizzare:segnaposto mostrato per ottenere l'interazione in stile MaterialDesign
Italiano: https://blog.csdn.net/weixin_41192489/article/details/121976627
Utilizzare:segnaposto-mostrato per verificare il valore null e il prompt non può essere vuoto.
Italiano: https://blog.csdn.net/weixin_41192489/article/details/121977510
:checked implementa l'espansione e il collasso
Italiano: https://demo.cssworld.cn/selector/9/2-1.php
:selezionato implementa il cambio di scheda
Italiano: https://demo.cssworld.cn/selector/9/2-2.php
:checked implementa pulsanti di opzione personalizzati, caselle di controllo, interruttori, controlli di etichette e selezioni di opzioni di materiale
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122050069
Utilizzare :valid e :invalid per implementare la convalida del modulo nativo
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122070084
Utilizzare :required e :optional per implementare il testo della richiesta di verifica del modulo
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122072879
:focus-within implementa l'elenco a discesa
Italiano: https://blog.csdn.net/weixin_41192489/article/details/121959850
Quando la casella di input è focalizzata, evidenzia l'etichetta in primo piano (vedi metodo 5 nel collegamento)
Italiano: Italiano: https://blog.csdn.net/weixin_41192489/article/details/121784196
Passa il mouse per visualizzare l'immagine ingrandita oppure fai clic con il mouse per visualizzare l'immagine ingrandita
Italiano: https://blog.csdn.net/weixin_41192489/article/details/121944791
:empty nasconde gli elementi vuoti e i campi mancanti, suggerimenti intelligenti
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122086159
:only-child implementa l'animazione di caricamento dinamico multistato
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122088416
:fullscreen abilita la visualizzazione a schermo intero delle immagini cliccate
Italiano: https://blog.csdn.net/weixin_41192489/article/details/122328725
Selettore di pseudo elementi
::
Utilizzato per selezionare e applicare uno stile a parte di un elemento, anziché all'intero elemento
CSS2中伪元素采用单冒号前缀语法, CSS2.1中伪元素改用双冒号前缀,所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话,推荐使用旧的单冒号语法,否则建议使用新的双冒号前缀
::before
E::after
Deve essere utilizzato insieme all'attributo content per impostare il contenuto prima e dopo l'elemento. Per i dettagli, vedere
Italiano: https://blog.csdn.net/weixin_41192489/article/details/115100040
Esempi pratici comunemente utilizzati:
::first-letter
Iniziali<p>很久很久以前</p>
<p>Long long ago</p>
p::first-letter {
font-size: 2em;
color: red;
}
::first-line
prima riga <div style="width: 120px">
<p>很久很久以前,有一个白发苍苍的老人</p>
</div>
p::first-line {
color: red;
}
::selection
Trascinare il mouse per selezionare l'area<p>很久很久以前,有一个白发苍苍的老人</p>
p::selection {
color: red;
background-color: yellow;
}
::placeholder
segnaposto di testo<input placeholder="请输入" />
/* input 不写,则会选中页面所有元素的占位符 */
input::placeholder {
color: red;
}
Selettore di relazione
Seleziona gli elementi in base alle relazioni tra gli elementi
>
Il tag di primo livello racchiuso all'interno di un tag è il suo discendente
<div>
<p>我是div的儿子</p>
</div>
div>p{
color:red;
}
空格
Tutti i tag all'interno di un tag sono i suoi discendenti
<div class="parent">
<p class="red">我是子代(属于后代)</p>
<p>我是子代(属于后代,但没有 .red)</p>
<div>
<div class="red">我是孙代(也属于后代)</div>
</div>
</div>
/* 所有属于.parent元素内部的.red元素都将被染成红色。*/
.parent .red {
color: red;
}
~
Sotto lo stesso elemento genitore, seleziona l'elemento specificatoDopoTutti gli elementi dello stesso livello, quindi in senso stretto, dovrebbero essere chiamati 后面兄弟选择器
<div>
<button>按钮1(不会变红)</button>
<p>段落</p>
<button>按钮2(会变红)</button>
</div>
p ~ button {
color: red;
}
CSS n 前面兄弟选择器
, è possibile fare riferimento al collegamento riportato di seguito per simulare l'implementazione
Italiano: Italiano: https://blog.csdn.net/weixin_41192489/article/details/121784196
+
Seleziona l'elemento successivo immediatamente dopo un elemento
<div class="parent">
<p>段落</p>
<button>按钮1</button>
<button>按钮2</button>
</div>
p + button {
color: red;
}
Seleziona gli elementi sulla pagina che corrispondono a più selettori contemporaneamente
<p class="red">很久很久以前1</p>
<p>很久很久以前2</p>
/* 选中 p 标签中class值含 red 的元素 */
p.red {
color: red;
}
,
Tra più selezionatori, finché uno di essi sarà soddisfatto, verrà selezionato.
,
separato <p class="error">报错信息</p>
<p class="important">重要信息</p>
<p>其他信息</p>
.error,
.important {
color: red;
}