CSS偽類是什麼？ CSS偽類的詳細介紹-css教學-PHP中文網

無論您是初學者還是經驗豐富的CSS開發人員，您都可能聽說過偽類。最著名的偽類可能是:hover，當指標設備（例如滑鼠）指向它時，它允許我們在處於懸停狀態時對元素進行樣式化。

按照我們先前關於margin：auto和CSS Floats的內容介紹，我們在這篇文章中對偽類別進行了更深入的研究。我們將看到什麼是偽類，它們是如何運作的，我們如何對它們進行分類，以及它們與偽元素的區別。（推薦教學：css影片教學）

什麼是偽類別？

一個偽類別是我們可以為了增加CSS選擇一個關鍵字定義一個特殊狀態的屬於HTML元素。我們可以使用冒號語法將偽類別新增至CSS選擇器，:如下所示：a:hover{ ... }

一個CSS類別是我們可以新增到HTML我們想要申請，同一款式的規則元素，例如頂部選單項目或側邊欄小工具的標題屬性。換句話說，我們可以使用CSS類別對以某種方式相似的HTML元素進行分組或分類。

偽類別與它們類似，因為它們也用於將樣式規則新增至共用相同特徵的元素。

但是，雖然真正的類別是用戶定義的並且可以在原始程式碼中被發現，但是例如，基於所屬的HTML元素的當前狀態，UA（用戶代理）（例如web瀏覽器）添加< ;div class="myClass">偽類。

偽類和偽元素可以在CSS選擇器中使用，但在HTML原始碼中不存在。相反，它們在某些條件下由UA「插入」以用於在樣式表中尋址。

偽類別的目的

常規CSS類別的工作是將元素分類或分組。開發人員知道他們的元素是如何分組的：他們可以形成類似“選單項目”，“按鈕”，“縮圖”等的類別來分組，以及後來的類似元素的樣式。這些分類是基於開發人員自己給出的元素特徵。

例如，如果開發者決定使用a

作為縮圖對象，則可以使用

「縮圖」類別對其進行分類。

<div class="thumbnail">[...]</div>

登入後複製

然而，HTML元素具有基於其狀態，位置，性質以及與頁面和使用者的互動的共同特徵。這些是HTML程式碼中通常不標記的特徵，但我們可以使用 CSS中的偽類別來定位它們，例如：

1、一個元素，它是其父元素中的最後一個子元素

2、訪問的連結

3、一個全螢幕的元素。

這些是偽類別通常所針對的特徵。為了更好地理解類別和偽類之間的區別，我們假設我們使用該類別.last來標識不同父容器中的最後一個元素。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

登入後複製

我們可以使用以下CSS來設定這些最後一個子元素的樣式：

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

登入後複製

但是當最後一個元素改變時會發生什麼？好吧，我們必須將.last類別從前一個元素移動到當前元素。

更新類別的麻煩可以留給使用者代理，至少對於元素中常見的那些特徵（並且最後一個元素是它可以獲得的常見元素）。擁有預先定義的:last-child偽類確實非常有用。這樣，我們不必指示 HTML程式碼中的最後一個元素，但我們仍然可以使用以下CSS來設定它們的樣式：

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

登入後複製

偽類別的主要類型

偽類有很多種，它們都為我們提供了基於其特徵無法存取或難以存取的特徵來定位元素的方法。這是MDN 中標準偽類的清單。

1.動態偽類

動態偽類根據它們轉換為回應使用者的互動的狀態動態地加入到HTML元素和從HTML元素中刪除。一些的動態偽類的例子是，，，和，所有這些都可以被添加到錨定標記。 :hover:focus:link:visited

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

登入後複製

#2.基於狀態的偽類別

基於狀態的偽類別在處於特定靜態時加入元素中。其中一些最著名的例子是：

:checked可以應用於複選框（）

:fullscreen 定位目前以全螢幕模式顯示的任何元素

:disabledHTML元素，可以是在已停用模式，例如，