Condivisione della tecnologia

한어Русский язык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 pseudoclasse :状态名

Seleziona gli elementi in base ai loro diversi stati

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Utilizza selettori di pseudo-classi negli elenchi

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

• 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)。

• Esempio pratico di selettore di pseudo-classe

  • 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中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  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:

  • Aggiungi icone prima e dopo gli elementi (la magia di ::prima e ::dopo)
    Italiano: https://blog.csdn.net/weixin_41192489/article/details/134858462
  • I CSS utilizzano abilmente ::after e ::before per implementare la navigazione tra categorie verticali
    Italiano: https://blog.csdn.net/weixin_41192489/article/details/134885007
  • css utilizza abilmente ::after per ottenere l'animazione di cambio scheda
    Italiano: https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Iniziali

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line prima riga

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Trascinare il mouse per selezionare l'area

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder segnaposto di testo

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Selettore di relazione

  Seleziona gli elementi in base alle relazioni tra gli elementi

  selettore discendente >

  Il tag di primo livello racchiuso all'interno di un tag è il suo discendente

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  selettore discendente 空格

  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>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  selezionatore del fratello ~

  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>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  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

  selezionatore del fratello vicino +

  Seleziona l'elemento successivo immediatamente dopo un elemento

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Selettore di intersezione

  Seleziona gli elementi sulla pagina che corrispondono a più selettori contemporaneamente

  • Non ci sono spazi tra i selettori (gli spazi sono selettori discendenti)
  • Se esiste un selettore di tag, il selettore di tag deve essere posizionato per primo

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Selettore dell'Unione ,

  Tra più selezionatori, finché uno di essi sarà soddisfatto, verrà selezionato.

  • Utilizzato tra più selettori , separato

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4