這篇“CSS偽類選擇器的知識有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS偽類選擇器的知識有哪些”文章吧。
站在用戶的角度思考問題，與客戶深入溝通，找到渝中網(wǎng)站設(shè)計與渝中網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋渝中地區(qū)。
偽類
偽類選擇器實質(zhì)上是讓設(shè)計師可以根據(jù)元素特定的狀態(tài)，設(shè)置不同的視覺效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。
HTMLAnchorElement的4大經(jīng)典偽類
:link，用于設(shè)置鏈接初始狀態(tài)時的樣式;
:visited，用于設(shè)置鏈接被點擊過后的樣式;
:hover，用于設(shè)置鼠標(biāo)懸停在鏈接上方時，鏈接的樣式;
:active，用于設(shè)置鼠標(biāo)按鍵按下，但未釋放時，鏈接的樣式。
想必各位都和我一樣，最初接觸到的就是上述4個偽類了吧？！而且還死機硬背它們的設(shè)置順序(LVAH)吧，哈哈。
設(shè)置當(dāng)前目標(biāo)元素樣式
還記得URL中的井號嗎？從井號(#)開始到URL的末尾稱為URL的hash或fragment，用于定位頁面內(nèi)某項資源。假設(shè)現(xiàn)在頁面存在
而上述這個被定位的頁面資源，被稱為目標(biāo)元素或當(dāng)前活動元素！可通過:target設(shè)置其樣式。
兼容性：IE9開始支持。
示例：
//當(dāng)前URL為http://foo.com#1
:target{
color:red;
}
.title{
color:blue;
&:target{
border:solid1pxred;
}
}
.title{I'mnottargetelement.}
.title#1{Yes,I'm.}
設(shè)置元素獲得焦點時的樣式
:focus用于設(shè)置元素處于focus狀態(tài)下的樣式。
兼容性：IE8開始支持。
那么哪些元素支持focus狀態(tài)呢？那要先弄清楚通過哪些操作可能實現(xiàn)focus。
它們分別是：
鼠標(biāo)點擊;
Tab鍵;
通過JavaScript的HTMLElement.prototype.focus()方法。
那么傳統(tǒng)上支持focus狀態(tài)的元素必定是a、button、input、select和textareas.
而HTML5中增加當(dāng)元素設(shè)置了contenteditable或tabindex屬性時，該元素支持focus狀態(tài)。
也就是符合以下選擇器的元素均支持focus狀態(tài)。
a,button,input,select,textarea,[contenteditable],[tabindex]
注意：若tabindex屬性值小于0，則無法通過Tab鍵獲得焦點。但可以通過鼠標(biāo)點擊或腳本時元素獲得焦點。
JS獲取當(dāng)前得到焦點的元素
/*
*加載完成時默認(rèn)返回body
*若某元素獲得焦點時，則返回該元素
*/
document.activeElement::HTMLElement
另外還有一個讓人誤會的屬性
//用于檢測文檔是否得到焦點，即用戶是否正在與頁面交互
//頁面僅僅位于屏幕可視區(qū)域，而用戶沒有與之交互時返回false。
document.hasFocus::Void->Boolean
設(shè)置子元素獲得焦點時，該元素的樣式
:focus-within，用于設(shè)置當(dāng)子元素處于focus狀態(tài)時，該元素的樣式。
兼容性:Chrome63開始支持。
示例：二次確認(rèn)密碼時，密碼框高亮
.form-control{
&:focus-within>input{
&:focus{
border:solid1pxskyblue;
}
&:not(:focus){
border:solid1pxorange;
}
}
}
.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]
其他
:root，用于設(shè)置元素的樣式，從IE9開始支持。
:checked，用于設(shè)置單選和復(fù)選控件被選中的樣式，從IE9開始支持。結(jié)合偽元素::before和content屬性可以實現(xiàn)靈活高效的自定義單選和復(fù)選控件。
:empty，用于設(shè)置沒有子節(jié)點的元素的樣式。p{}為存在TEXT_NODE子節(jié)點的元素，而p{}則為沒有子節(jié)點的元素。
:not，作為謂語表達(dá)取反的語義。
:placeholder-shown，用于設(shè)置元素placeholder顯示時的樣式。
以上就是關(guān)于“CSS偽類選擇器的知識有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
