CSS中偽類和偽元素的詳細介紹（程式碼範例）

這篇文章帶給大家的內容是關於CSS中偽類別和偽元素的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、偽類

偽類包含兩種：狀態偽類（UI 偽類）和結構性偽類。

(1)狀態偽類別是基於元素目前狀態進行選擇的。

在與使用者的互動過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。

常見的狀態偽類別主要包括：

:link 套用於未被存取過的連結；  
:hover 套用於滑鼠懸停到的元素；  
:active應用於被啟動的元素；  
:visited 應用於被訪問過的鏈接，與:link互斥。 
:focus 應用於擁有鍵盤輸入焦點的元素。
:target 應用在連結點擊後指向元素

前4 個偽類別的特指度相同，如果不按照這裡列出的順序使用它們，瀏覽器可能不會顯示預期結果。為了好記，可以這麼想：「LoVe? HA!」大寫字母就是每個偽類的頭一個字母。

input:focus {border:1px solid blue;}

會在遊標位於 input 欄位時，為該欄位新增一個藍色邊框。這樣可以讓使用者明確地
地知道輸入的字元會出現在哪裡。

<a>More Information</a>
<h2 id="This-is-the-information-you-are-looking-for">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

會在使用者點擊連結轉向 ID 為 more_info的元素時，為該元素新增淺灰色背景。

(2)結構性偽類是css3新增選擇器

利用dom樹進行元素過濾，透過文件結構的互相關係來匹配元素，能夠減少class和id屬性的定義，使文檔結構更簡潔。

常見的包括：

:first-child 選擇某個元素的第一個子元素； 
:last-child 選擇某個元素的最後一個子元素；  
:nth-child() 選擇某個元素的一個或多個特定的子元素；  
:nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；  
:nth-of-type() 選擇指定的元素；  
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；  
:first-of-type 選擇一個上級元素下的第一個同類子元素；  
:last-of-type 選擇一個上級元素的最後一個同類子元素；  
:only-child 選擇的元素是它的父元素的唯一一個子元素；  
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；  
:empty 選擇的元素裡面沒有任何內容。

二、偽元素

偽元素是對元素中的特定內容進行操作，而不是描述狀態。它的操作層次比偽類更深一層，因此動態性比偽類低很多。實際上，偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文件結構中！

常見的偽元素選擇器包括：

:first-letter 選擇元素文字的第一個字（母）。 
:first-line 選擇元素文字的第一行。 
:before 在元素內容的最前面新增內容。 
:after 在元素內容的最後面新增內容。

三、注意

單冒號(:)用於CSS3 偽類，雙冒號(::)用於CSS3 偽元素，為了相容於某些瀏覽器，一般都採用單冒號

相容性的問題，交給postcss去做。本文並未涉及相容性的寫法，包括前綴問題，可以交給autoprefixer去做。 （這句話啥意思沒懂，以後看看說的啥）

偽類（結構偽類）的效果可以透過添加一個實際的類別來達到，而偽元素的效果則需要透過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。

四、偽元素的使用

（1） 清除浮動

.clear:after {
content: '';
display: block;
clear: both;
}

(2) 畫分割線

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: &#39;&#39;;
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style>
  <p>分割线</p>

以上是CSS中偽類和偽元素的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！