日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
16個(gè)非常有用的CSS偽選擇器，你千萬(wàn)不要錯(cuò)過(guò)了！

這篇文章鼓勵(lì)構(gòu)造 UI 時(shí)使用更多純 CSS 和更少的 JS。熟悉所有的 CSS 是實(shí)現(xiàn)這個(gè)目標(biāo)的一種方法 —— 另一種是實(shí)施最佳實(shí)踐和盡可能的減少代碼。

1、::first-line | 選擇首行文本

這個(gè)偽元素選擇器選擇換行之前文本的首行。

 
 
 
    
  
  
  
  1. p:first-line {
    2. 
  
  
  
  2.     color: lightcoral;
    3. 
  
  
  
  3. }
    4.

2、::first-letter | 選擇首字母

這個(gè)偽元素選擇器應(yīng)用于元素中文本的首字母。

 
 
 
    
  
  
  
  1. .innerDiv p:first-letter {
    2. 
  
  
  
  2.     color: lightcoral;
    3. 
  
  
  
  3.     font-size: 40px
    4. 
  
  
  
  4. }
    5.

3、::selection | 選擇高亮（被選中）的區(qū)域

應(yīng)用于任何被用戶選中的高亮區(qū)域。通過(guò) ::selection 偽元素選擇器，我們可以將樣式應(yīng)用于高亮區(qū)域。

 
 
 
    
  
  
  
  1. div::selection {
    2. 
  
  
  
  2.     background: yellow;
    3. 
  
  
  
  3. }
    4.

4、:root | 根元素

:root 偽類選中文檔的根元素。在 HTML 中，為 HTML 元素。在 RSS 中，則為 RSS 元素.這個(gè)偽類選擇器應(yīng)用于根元素，多用于存儲(chǔ)全局 CSS 自定義屬性。

5、:empty | 僅當(dāng)元素為空時(shí)觸發(fā)

這個(gè)偽類選擇器將選中沒(méi)有任何子項(xiàng)的元素。該元素必須為空。如果一個(gè)元素沒(méi)有空格、可見(jiàn)的內(nèi)容、后代元素，則為空元素。

 
 
 
    
  
  
  
  1. div:empty {
    2. 
  
  
  
  2.     border: 2px solid orange;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
    7. 
  
  
  
    8.

這個(gè)規(guī)則將應(yīng)用于空的 div 元素。這個(gè)規(guī)則將應(yīng)用于第一個(gè)和第二個(gè) div ，因?yàn)樗麄兪钦鏋榭?，而第三個(gè) div 包含空格。

6、:only-child | 選擇僅有的子元素

匹配父元素中沒(méi)有任何兄弟元素的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:only-child {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

7、:first-of-type | 選擇第一個(gè)指定類型的子元素

 
 
 
    
  
  
  
  1. .innerDiv p:first-of-type {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

這將應(yīng)用于 .innerDiv 下的第一個(gè) p 元素。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    Div1
    3. 
  
  
  
  3.     
    These are the necessary steps
    4. 
  
  
  
  4.     
    hiya
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.     
    7. 
  
  
  
  7.         Do not push the brake at the same time as the accelerator.
    8. 
  
  
  
  8.     
    9. 
  
  
  
  9.     
    Div2
    10.

這個(gè) p （“These are the necessary step”）將被選中。

8、:last-of-type | 選擇最后一個(gè)指定類型的子元素

像 :first-of-type 一樣，但是會(huì)應(yīng)用于最后一個(gè)同類型的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:last-of-type {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

這將應(yīng)用于 innerDiv 下的最后一個(gè) p 段落元素。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    These are the necessary steps
    3. 
  
  
  
  3.     
    hiya
    4. 
  
  
  
  4.     
    Div1
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.         Do the same.
    7. 
  
  
  
  7.     
    8. 
  
  
  
  8.     
    Div2
    9.

因此，這個(gè) p 元素（“Do the same”）將被選中。

9、:nth-of-type() | 選擇特定類型的子元素

這個(gè)選擇器將從指定的父元素的孩子列表中選擇某種類型的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:nth-of-type(1) {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

10、:nth-last-of-type() | 選擇列表末尾中指定類型的子元素

這將選擇最后一個(gè)指定類型的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:nth-last-of-type() {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

這將選擇 innerDiv 列表元素中包含的最后一個(gè)段落類型子元素。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    These are the necessary steps
    3. 
  
  
  
  3.     
    hiya
    4. 
  
  
  
  4.     
    Div1
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.         Do the same.
    7. 
  
  
  
  7.     
    8. 
  
  
  
  8.     
    Div2
    9.

innerDiv 中最后一個(gè)段落子元素 p （“Do the same”）將會(huì)被選中。

11、:link | 選擇一個(gè)未訪問(wèn)過(guò)的超鏈接

這個(gè)選擇器應(yīng)用于未被訪問(wèn)過(guò)的鏈接。常用于帶有 href 屬性的 a 錨元素。

 
 
 
    
  
  
  
  1. a:link {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
  5. Login
    6.

這將選中未被點(diǎn)擊過(guò)帶有 href 的指定界面的 a 錨點(diǎn)元素，選中的元素中的文字將會(huì)顯示為橙色。

12、:checked | 選擇一個(gè)選中的復(fù)選框

這個(gè)應(yīng)用于已經(jīng)被選中的復(fù)選框。

 
 
 
    
  
  
  
  1. input:checked {
    2. 
  
  
  
  2.     border: 2px solid lightcoral;
    3. 
  
  
  
  3. }
    4.

這個(gè)規(guī)則應(yīng)用到所有被選中的復(fù)選框。

13、:valid | 選擇一個(gè)通過(guò)驗(yàn)證的元素

這主要用于可視化表單元素，以讓用戶判斷是否驗(yàn)證通過(guò)。驗(yàn)證通過(guò)時(shí)，默認(rèn)元素帶有 valid屬性。

 
 
 
    
  
  
  
  1. input:valid {
    2. 
  
  
  
  2.     boder-color: lightsalmon;
    3. 
  
  
  
  3. }
    4.

14、:invalid | 選擇一個(gè)未通過(guò)驗(yàn)證的元素

像 :valid 一樣，但是會(huì)應(yīng)用到未通過(guò)驗(yàn)證的元素。

 
 
 
    
  
  
  
  1. input[type="text"]:invalid {
    2. 
  
  
  
  2.     border-color: red;
    3. 
  
  
  
  3. }
    4.

15、:lang() | 選擇指定語(yǔ)言的元素

應(yīng)用于指定了語(yǔ)言的元素。可以通過(guò)以下兩種方式使用：

 
 
 
    
  
  
  
  1. p:lang(fr) {
    2. 
  
  
  
  2.     background: yellow;
    3. 
  
  
  
  3. }
    4.

或者

 
 
 
    
  
  
  
  1. p[lang|="fr"] {
    2. 
  
  
  
  2.     background: yellow;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
  5. Paragraph 1
    6.

16、:not() | 對(duì)于選擇取反（這是一個(gè)運(yùn)算符）

否定偽類選擇器選中相反的。讓我們看一個(gè)示例：

 
 
 
    
  
  
  
  1. .innerDiv :not(p) {
    2. 
  
  
  
  2.     color: lightcoral;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
  6.     
    Paragraph 1
    7. 
  
  
  
  7.     
    Paragraph 2
    8. 
  
  
  
  8.     
    Div 1
    9. 
  
  
  
  9.     
    Paragraph 3
    10. 
  
  
  
  10.     
    Div 2
    11.

Div 1 和 Div 2 會(huì)被選中，因?yàn)樗麄儾皇?p 元素。

結(jié)論

就這些了。這是全部?jī)?nèi)容。還有更多的偽選擇器，但是為非標(biāo)準(zhǔn)的，因此我省略了它們。感謝閱讀


當(dāng)前題目：16個(gè)非常有用的CSS偽選擇器，你千萬(wàn)不要錯(cuò)過(guò)了！
分享網(wǎng)址：http://www.dlmjj.cn/article/dpsdssh.html