CSS偽類使用詳解

jimojianghu發表於2022-11-29
CSS

基本描述

CSS偽類是很常用的功能，主要應用於選擇器的關鍵字，用來改變被選擇元素的特殊狀態下的樣式。
偽類類似於普通CSS類的用法，是對CSS選擇器的一種擴充套件，增強選擇器的功能。
目前可用的偽類有大概40多個，少部分有相容性問題。我們比較常見的，如::hover、:root、:first-child等。

語法：selector:pseudo-class { property: value; }。

div:hover {
  background-color: #f00;
}

如上程式碼，即是web常用的滑鼠hover行為，當滑鼠移動到div上面時，就改變div的背景色為紅色。

常用偽類

偽類增強了CSS選擇器的能力，能讓我們透過使用CSS實現更多有用的效果，是前端開發中需要掌握好的一項CSS技巧。
下面介紹較常用的一些偽類，以行為和狀態改變引起變化導致的偽類資訊的匹配。

  • :hover
    在瀏覽器中，滑鼠指標懸停到元素上時，響應對應的樣式。
    觸控式螢幕上該偽類幾乎不可用。
  • :active
    被啟用的元素，滑鼠互動中，代表的時滑鼠按下到鬆開之間的行為。
  • :link
    選中所有未被訪問的連結元素。
  • :visited
    選中已訪問過的連結元素，一般能改變的主要顏色屬性。
  • :focus
    獲得焦點的元素，一般用於表單輸入的元素。
    透過是否獲得焦點改變狀態。
  • :checked
    處於選中狀態的 radio、checkbox、select 表單元素的選項。
    透過選中/取消選中來改變狀態。
  • :disabled
    任何被禁用的元素，如果一個元素處於被禁用狀態，則匹配。
  • :enabled
    被啟用的元素，如果元素處於被啟用狀態，則匹配。

元素啟用和禁用：如果一個元素能選擇、點選、輸入文字或獲取焦點則屬於啟用；否則禁用。

下面透過一個簡單的示例，看下其中幾個偽類的基本使用：

<div class="province">
  <span>中國中部的省份</span>
  <div>
    <input type="radio" name="province"><a href="http://www.jiangxi.gov.cn">江西</a>
    <input type="radio" name="province"><a href="http://www.hunan.gov.cn">湖南</a>
  </div>
  <input type="text" value="222222" />
  <textarea>999999</textarea>
</div>

div:hover {
  color: #ddd;
}
a:link {
  color: #f00;
}
a:visited {
  color: #00f;
}
input:focus {
  background-color: #ff0;
}
input:checked {
  box-shadow: 0 0 0 3px #f00;
}
*:enabled {
  color: #f00;
}

上述程式碼即對部分偽類的使用，結果如下圖：

image

如上圖所示，偽類樣式已起作用：

  • 已訪問連結設定藍色(湖南)，未訪問連結是紅色(江西)；
  • 焦點啟用元素背景色設定黃色(input輸入框)；
  • 選中的radio設定紅色陰影(江西選項的radio標籤)；
  • 被啟用的元素則設定文字為紅色(input輸入框、textarea框)。

節點匹配的偽類

下面介紹匹配父子兄弟節點元素的偽類，這些偽類在我們匹配節點元素時用處很大：

  • :first-child
    匹配某個元素，它屬於它父元素的第一個子元素。
  • :last-child
    匹配某個元素，它屬於它父元素的最後一個一個子元素。
  • :nth-child(n)
    匹配某個元素，它屬於它父元素的指定位置的元素。
  • :nth-last-child(n)
    匹配某個元素，它屬於它父元素的從後往前數的指定位置的元素。
  • :first-of-type
    匹配指定型別元素，並且它屬於它父元素的第一個子元素。
  • :nth-of-type(n)
    匹配指定型別元素，並且它屬於它父元素的指定位置的元素。
  • :last-of-type
    匹配指定型別元素，並且它屬於它父元素的的最後一個子元素。
  • :nth-last-of-type(n)
    匹配指定型別元素，並且它屬於它父元素的從後往前數的指定位置的元素。
  • :only-of-type
    匹配沒有同型別兄弟元素的元素，有同型別兄弟元素則無效。
  • :only-child
    匹配沒有任何兄弟元素的元素，有兄弟元素則無效。

透過下面的程式碼，看下匹配節點元素時，帶type和不帶type的區別：

<div>
  <span>前端1</span>
  <div class="country">後端1</div>
  <div class="country">客戶端1</div>
</div>
<div>
  <div>前端2</div>
  <span class="country-type">後端2</span>
  <span class="country-type">客戶端2</span>
  <div>移動端2</div>
</div>

.country:first-child {
  color: #f00;
}
.country:last-child {
  color: #00f;
}
.country-type:first-of-type {
  color: #f00;
}
.country-type:last-of-type {
  color: #00f;
}

頁面呈現：

image

以上示例，
first-child所在元素(後端1)不屬於它父元素的第一個元素，偽類不起作用，所以樣式不生效；
last-child所在元素(客戶端1)屬於它父元素的最後一個元素，偽類起作用，樣式生效，顯示藍色文字；
first-of-type所在元素(後端2)不屬於它父元素的第一個元素，但屬於它同型別(div)的第一個，偽類起作用，顯示紅色文字；
last-of-type所在元素(客戶端2)不屬於它父元素的最後一個元素，但屬於它同型別(div)的最後一個，偽類起作用，顯示藍色文字；

因此，帶type的偽類，是需要判斷是否存在同型別的兄弟元素。這裡的型別是指 html標籤名，標籤名一樣就是同型別。

其他

CSS中的下面這些偽類在某些特定情形下卻很有用：

  • :required：匹配任意設定了required屬性的表單元素。
  • :default：一組相關元素中的預設表單元素。
  • :read-write：可被編輯的表單元素，如input、textarea、設定了contenteditable屬性的 p 元素等。
  • :read-only：所有不可被編輯的元素，包含設定了readonly屬性的input元素。
  • :optional：任意沒有設定required屬性的表單元素。
  • :valid：任意內容透過驗證的表單元素。
  • :invalid：任意內容未透過驗證的表單元素。
  • :focus-within：一個元素獲得焦點，或該元素的子元素獲得焦點。
  • :out-of-range：input元素的max和min範圍外。
  • :in-range：input元素的max和min範圍內。
  • :target：選中錨點匹配元素(id)。
  • :empty：匹配沒有子元素的元素，子元素包含元素、文字、空格。
  • :root：匹配dom文件樹的根元素，如 <html> 元素，優先順序比html元素高。
  • :is()：選中給定的選擇器列表能匹配的元素。
  • :has()：指定選擇器引數匹配的元素。
  • :lang()：基於元素語言來匹配相應元素。
  • :not()：用來匹配不符合選擇器引數的元素。

如 :root偽類：
我們可以透過它定義全域性的CSS自定義屬性，實現主題樣式的切換等，可參考前文使用CSS自定義屬性實現頁面的主題切換。

:root {
  --color: red;
}
:root[theme="black"] {
  --color: #000;
}
:root[theme="white"] {
  --color: #fff;
}

如 :not偽類：
可以結合其他偽類進行聯合判斷，下面的程式碼即是判斷如果不是最後一個元素，則增加20個畫素的右外邊距。

div:not(:last-child) {
  margin-right: 20px;
}

偽類增強了CSS選擇器的能力，能讓我們透過使用CSS實現更多有用的效果，是前端開發中需要掌握好的一項CSS技巧。
而CSS中除了偽類以外，還有一種偽元素，用處也非常大，但和偽類很相似，常被混淆，後續我將詳細介紹下偽元素，並分析下它們的區別。

相關文章