這篇文章為大家?guī)碛嘘P(guān)CSS偽類選擇器的使用方法詳細(xì)介紹。大部分知識點(diǎn)都是大家經(jīng)常用到的，為此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),湯陰網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:湯陰等地區(qū)。湯陰做網(wǎng)站價(jià)格咨詢:028-86922220

前言

:link、::after和content等偽類、偽元素選擇器，最近看書時(shí)發(fā)現(xiàn)這方面有所欠缺，于是決定稍微深入學(xué)習(xí)一下，以下為偽類部分的整理。

偽類

?偽類選擇器實(shí)質(zhì)上是讓設(shè)計(jì)師可以根據(jù)元素特定的狀態(tài)，設(shè)置不同的視覺效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。

HTMLAnchorElement的4大經(jīng)典偽類

1. :link，用于設(shè)置鏈接初始狀態(tài)時(shí)的樣式;

2. :visited，用于設(shè)置鏈接被點(diǎn)擊過后的樣式;

3. :hover，用于設(shè)置鼠標(biāo)懸停在鏈接上方時(shí)，鏈接的樣式;

4. :active，用于設(shè)置鼠標(biāo)按鍵按下，但未釋放時(shí)，鏈接的樣式。

?想必各位都和我一樣，最初接觸到的就是上述4個(gè)偽類了吧？！而且還死機(jī)硬背它們的設(shè)置順序(LVAH)吧，哈哈。

設(shè)置當(dāng)前目標(biāo)元素樣式

?還記得URL中的井號嗎？從井號(#)開始到URL的末尾稱為URL的hash或fragment，用于定位頁面內(nèi)某項(xiàng)資源。假設(shè)現(xiàn)在頁面存在

Target

的元素，那么只要地址欄輸入#title瀏覽器就會不斷滾動(滾動不一定存在補(bǔ)間動效)直到元素h4#title位于可視區(qū)的特定位置。（注意：請不要和UI Routing混為一談）
而上述這個(gè)被定位的頁面資源，被稱為目標(biāo)元素或當(dāng)前活動元素！可通過:target設(shè)置其樣式。
兼容性：IE9開始支持。

示例：

// 當(dāng)前URL為http://foo.com#1
:target {
    color: red;
}
.title{
    color: blue;
    
    &:target{
        border: solid 1px red;
    }
}

.title{I'm not target element.}
.title#1{Yes, I'm.}

設(shè)置元素獲得焦點(diǎn)時(shí)的樣式

:focus用于設(shè)置元素處于focus狀態(tài)下的樣式。
兼容性：IE8開始支持。
那么哪些元素支持focus狀態(tài)呢？那要先弄清楚通過哪些操作可能實(shí)現(xiàn)focus。
它們分別是：

1. 鼠標(biāo)點(diǎn)擊;

2. Tab鍵;

3. 通過JavaScript的HTMLElement.prototype.focus()方法。

那么傳統(tǒng)上支持focus狀態(tài)的元素必定是a、button、input、select和textareas.
而HTML5中增加當(dāng)元素設(shè)置了contenteditable或tabindex屬性時(shí)，該元素支持focus狀態(tài)。
也就是符合以下選擇器的元素均支持focus狀態(tài)。

a,button,input,select,textarea,[contenteditable],[tabindex]

注意：若tabindex屬性值小于0，則無法通過Tab鍵獲得焦點(diǎn)。但可以通過鼠標(biāo)點(diǎn)擊 或 腳本時(shí)元素獲得焦點(diǎn)。

JS獲取當(dāng)前得到焦點(diǎn)的元素

/* 
 * 加載完成時(shí)默認(rèn)返回body
 * 若某元素獲得焦點(diǎn)時(shí)，則返回該元素
 */
document.activeElement :: HTMLElement

另外還有一個(gè)讓人誤會的屬性

// 用于檢測文檔是否得到焦點(diǎn)，即用戶是否正在與頁面交互
// 頁面僅僅位于屏幕可視區(qū)域，而用戶沒有與之交互時(shí)返回false。
document.hasFocus :: Void -> Boolean

設(shè)置子元素獲得焦點(diǎn)時(shí)，該元素的樣式

:focus-within，用于設(shè)置當(dāng)子元素處于focus狀態(tài)時(shí)，該元素的樣式。
兼容性:Chrome63開始支持。

示例：二次確認(rèn)密碼時(shí)，密碼框高亮

.form-control{
  &:focus-within > input{
    &:focus {
      border: solid 1px skyblue;
    }
    
    &:not(:focus){
      border: solid 1px orange;
    }
  }
}

.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]

其他

1. :root，用于設(shè)置元素的樣式，從IE9開始支持。

2. :checked，用于設(shè)置單選和復(fù)選控件被選中的樣式，從IE9開始支持。結(jié)合偽元素::before和content屬性可以實(shí)現(xiàn)靈活高效的自定義單選和復(fù)選控件。

3. :empty，用于設(shè)置沒有子節(jié)點(diǎn)的元素的樣式。p{ }為存在TEXT_NODE子節(jié)點(diǎn)的元素，而p{}則為沒有子節(jié)點(diǎn)的元素。

4. :not，作為謂語表達(dá)取反的語義。

5. :placeholder-shown，用于設(shè)置元素placeholder顯示時(shí)的樣式。

看完上述內(nèi)容，你們對CSS偽類選擇器的使用方法有進(jìn)一步的了解嗎？如果還想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。

文章名稱：CSS偽類選擇器的使用方法
本文鏈接：http://weahome.cn/article/iecedj.html