基本描述
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 >
<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="https://www.cnblogs.com/jimojianghu/p/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;
}
上述代碼即對部分偽類的使用，結果如下圖：
如上圖所示，偽類樣式已起作用：
- 已訪問鏈接設定藍色(湖南)，未訪問鏈接是紅色(江西)；
- 焦點激活元素背景色設定黃色(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 >后端1</div>
<div >客戶端1</div>
</div>
<div>
<div>前端2</div>
<span >后端2</span>
<span >客戶端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;
}
頁面呈現：
以上示例，
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中除了偽類以外，還有一種偽元素，用處也非常大，但和偽類很相似，常被混淆，后續我將詳細介紹下偽元素，并分析下它們的區別，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538757.html
標籤：Html/Css
上一篇：SAP 例外現象之同一個IDoc可以被POST兩次觸發2張不同的物料憑證
下一篇：面向物件