CSS僞類和僞元素

時間 2019-11-12

標籤 css 元素欄目 CSS 简体版

原文原文鏈接

1、僞類

CSS僞類用於向某些選擇器添加特殊的效果，在W3規範中，CSS僞類有以下幾個：

CSS2.1

:active：向被激活的元素添加樣式（激活是指點擊鼠標那一下）

:focus：向擁有鍵盤輸入焦點的元素增長樣式

:hover：當鼠標懸浮在元素上方時，向元素增長樣式

:link：向未被訪問的連接增長樣式

:visited：向已被訪問的連接增長樣式

:first-child：向元素的第一個子元素增長樣式

:lang：向帶有指定lang屬性的元素增長樣式

CSS3中的僞類（注意CSS3級別的僞類可能缺少瀏覽器支持，可能要準備相應的JS支持）：

:nth-child

:nth-last-child

:nth-of-type

:first-of-type

:last-of-type

:empty

:target

:checked

:enabled

:disabled

提示：

一、僞類名稱對大小寫不敏感。好比：ACTIVE,Active，active都是合法的。

二、l v h a原則。按照 link 、visited、hover、active 的順序來寫。

三、在IE中必須聲明<!DOCTYPE>，first-child僞類纔會生效

四、僞類後面還可接選擇器

疑問：

對於first-child僞類，看下面的解釋：

一、p:first-child 匹配第一個元素， 選擇器匹配做爲任何元素的第一個子元素的 p 元素，若是元素不是第一個，則無效。

成功的例子：

html:

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<body> <p> 哈哈哈 </p> <p> <i>AAA</i> <i>bbb</i> </p> <p> <i>CC</i> <i>DD</i> </p> <p lang="en">呵呵</p> </body>

css:

   
   
   
   
    
    
    
    
   
   
   
   
  p:first-child{color: yellow;}

效果：

其餘標籤內的元素不改變顏色。

失敗的例子：

html:

      
      
      
      
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      
      
      
      
 <body>        <span></span> <p> 哈哈哈 </p> <p> <i>AAA</i> <i>bbb</i> </p> <p> <i>CC</i> <i>DD</i> </p> <p lang="en">呵呵</p> </body>

css:

       
       
       
       
        
        
        
        
       
       
       
       
    p:first-child{color: yellow;}

效果：

沒有一個標籤內的顏色改變爲黃色，由於沒有一個標籤是做爲它的父元素的第一個元素。

二、p>i:first-child 匹配全部元素的第一個元素 選擇器匹配全部 元素中的第一個 元素，若是元素不是第一個則無效。

成功的例子：

html:

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
    <body> <p> <span>哈哈哈哈哈</span> <i>呵呵</i> 哈哈哈 <i>呵呵</i> </p> <p> <i>AAA</i> <i>bbb</i> </p> <p> <i>CC</i> <i>DD</i> </p> <p lang="en">呵呵</p> </body>

css:

   
   
   
   
    
    
    
    
   
   
   
   
p>i:first-child{color: green;}

效果：

，第一個標籤內，因爲不是第一個子元素，因此不會被選擇器選中，顏色不會變成綠色。

三、p:first-child i 匹配全部做爲第一個子元素中的全部元素 選擇器匹配全部做爲元素的第一個子元素的 元素中的全部 元素

成功的例子：

html：

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<body> <p> <span>哈哈哈哈哈</span> <i>呵呵</i> 哈哈哈 <i>呵呵</i> </p>  <p> <i>AAA</i> <i>bbb</i> </p> <p> <i>CC</i> <i>DD</i> </p> <p lang="en">呵呵</p> </body>

css:

   
   
   
   
    
    
    
    
   
   
   
   
p:first-child i{color: red;}

效果：

其餘標籤不會被選中，顏色不會變成紅色。

對於lang僞類，看下面的例子：

css

   
   
   
   
    
    
    
    
   
   
   
   
p:lang(en){color: red;}

html:

   
   
   
   
    
    
    
    
   
   
   
   
<p lang="en">呵呵</p>

效果：

2、僞元素

W3C規範中有4個僞元素：

CSS-1

:first-line 向文本的第一行添加樣式

:first-letter 向文本的第一個字母添加特殊樣式

CSS-2:

:after 在元素以後添加內容

:before 在元素以前添加內容

提示：

一、CSS3中規定僞元素的寫法是要用兩個冒號的，好比，::first-line，可是因爲一些IE瀏覽器不支持，因此如今變得既能夠用兩個冒號，也能夠用用一個冒號。

二、另外，:after和:before會在元素中添加內容，具體的方式相似於：

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
p:after{    content:"內容";}

三、同一個標籤可使用多重僞元素，好比：

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
p:first-line{ color:red;}p:first-letter{ color:yellow;}