CSS中的僞類和僞元素

僞類

僞類與類類似，但又沒有類附加標籤上。僞類分爲UI僞類和結構化僞類。

UI僞類

• :link(將樣式添加到未被訪問的連接上)

• :visted(將樣式已添加到訪問的連接上)

• :hover(將樣式添加到鼠標懸浮的元素上)

• :active(將樣式添加到被激活的元素上)

• :focus(將樣式添加到被選中的元素上)

結構化僞類

• :first-child(將樣式添加到第一個子元素上)

• :last-child(將樣式添加到最後一個子元素上)

  僞元素
  

• 僞元素是在文檔中如有實無的元素。

• 主要有如下幾種
  

• :first-letter(將樣式添加到第一個字母)

• :first-line(將樣式添加到第一行)

• :before(在某些元素前面插入某些內容)

• :after(在某些元素後面插入某些內容)

• 看到:after，你們腦子裏應該都能浮現出那個清除浮動的CSS的吧。沒錯，就是這個。

• .clearfix:after {
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
  }

區別

仔細琢磨下它們的定義。

僞類的實現就比如給這個標籤添加了一個虛擬的類。

舉個例子：

.hover{
    font-size:20px;
    color:red
}
<a href="#" class="hover">Hello,World</a>

這麼一對比，」僞類「就顧名思義了啊。

而僞元素則比如添加了一個新的標籤。

p:first-letter{
    font-size:20px;
    color:red
}
<p>Hello,World</p>

若不用僞元素，實現一樣的效果，須要這麼作

.first-letter{
    font-size:20px;
    color:red
}
<p><span class="first-letter">Hello,World</span></p>

所以總結下區分的方法：現實相同效果是須要添加一個類仍是一個元素標籤。

tips:

1.CSS3爲了區別僞類和僞元素，明確使用單冒號來表示僞類，雙冒號來表示僞元素。但爲兼容性考慮，目前基本仍是使用單冒號來表示。

2.搜索引擎不會搜索僞元素的信息。所以，不要經過僞元素添加你想讓搜索引擎索引的重要內容