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

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

新聞中心

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

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

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

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

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

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

這個偽元素選擇器應(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ū)域。通過 ::selection 偽元素選擇器，我們可以將樣式應(yīng)用于高亮區(qū)域。

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

4、:root | 根元素

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

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

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

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

這個規(guī)則將應(yīng)用于空的 div 元素。這個規(guī)則將應(yīng)用于第一個和第二個 div ，因為他們是真為空，而第三個 div 包含空格。

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

匹配父元素中沒有任何兄弟元素的子元素。

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

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

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

這將應(yīng)用于 .innerDiv 下的第一個 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.

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

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

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

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

這將應(yīng)用于 innerDiv 下的最后一個 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.

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

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

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

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

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

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

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

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

 
 
 
    
  
  
  
    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 中最后一個段落子元素 p （“Do the same”）將會被選中。

11、:link | 選擇一個未訪問過的超鏈接

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

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

這將選中未被點擊過帶有 href 的指定界面的 a 錨點元素，選中的元素中的文字將會顯示為橙色。

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

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

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

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

13、:valid | 選擇一個通過驗證的元素

這主要用于可視化表單元素，以讓用戶判斷是否驗證通過。驗證通過時，默認元素帶有 valid屬性。

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

14、:invalid | 選擇一個未通過驗證的元素

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

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

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

應(yīng)用于指定了語言的元素?？梢酝ㄟ^以下兩種方式使用：

 
 
 
    
  
  
  
  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() | 對于選擇取反（這是一個運算符）

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

 
 
 
    
  
  
  
  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 會被選中，因為他們不是 p 元素。

結(jié)論

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


標題名稱：16個非常有用的CSS偽選擇器，你千萬不要錯過了！
文章鏈接：http://www.dlmjj.cn/article/dpsdssh.html