溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“CSS偽類(lèi)選擇器的知識(shí)點(diǎn)有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS偽類(lèi)選擇器的知識(shí)點(diǎn)有哪些”吧!
偽類(lèi)
 偽類(lèi)選擇器實(shí)質(zhì)上是讓設(shè)計(jì)師可以根據(jù)元素特定的狀態(tài)，設(shè)置不同的視覺(jué)效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。
HTMLAnchorElement的4大經(jīng)典偽類(lèi)
:link，用于設(shè)置鏈接初始狀態(tài)時(shí)的樣式;
:visited，用于設(shè)置鏈接被點(diǎn)擊過(guò)后的樣式;
:hover，用于設(shè)置鼠標(biāo)懸停在鏈接上方時(shí)，鏈接的樣式;
:active，用于設(shè)置鼠標(biāo)按鍵按下，但未釋放時(shí)，鏈接的樣式。
 想必各位都和我一樣，最初接觸到的就是上述4個(gè)偽類(lèi)了吧？！而且還死機(jī)硬背它們的設(shè)置順序(LVAH)吧，哈哈。
設(shè)置當(dāng)前目標(biāo)元素樣式
 還記得URL中的井號(hào)嗎？從井號(hào)(#)開(kāi)始到URL的末尾稱(chēng)為URL的hash或fragment，用于定位頁(yè)面內(nèi)某項(xiàng)資源。假設(shè)現(xiàn)在頁(yè)面存在<h4id="title">Target</h4>的元素，那么只要地址欄輸入#title瀏覽器就會(huì)不斷滾動(dòng)(滾動(dòng)不一定存在補(bǔ)間動(dòng)效)直到元素h4#title位于可視區(qū)的特定位置。（注意：請(qǐng)不要和UIRouting混為一談）
 而上述這個(gè)被定位的頁(yè)面資源，被稱(chēng)為目標(biāo)元素或當(dāng)前活動(dòng)元素！可通過(guò):target設(shè)置其樣式。
 兼容性：IE9開(kāi)始支持。
示例：
//當(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è)置元素獲得焦點(diǎn)時(shí)的樣式
:focus用于設(shè)置元素處于focus狀態(tài)下的樣式。
兼容性：IE8開(kāi)始支持。
那么哪些元素支持focus狀態(tài)呢？那要先弄清楚通過(guò)哪些操作可能實(shí)現(xiàn)focus。
它們分別是：
鼠標(biāo)點(diǎn)擊;
Tab鍵;
通過(guò)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，則無(wú)法通過(guò)Tab鍵獲得焦點(diǎn)。但可以通過(guò)鼠標(biāo)點(diǎn)擊或腳本時(shí)元素獲得焦點(diǎn)。
JS獲取當(dāng)前得到焦點(diǎn)的元素
/*
*加載完成時(shí)默認(rèn)返回body
*若某元素獲得焦點(diǎn)時(shí)，則返回該元素
*/
document.activeElement::HTMLElement
另外還有一個(gè)讓人誤會(huì)的屬性
//用于檢測(cè)文檔是否得到焦點(diǎn)，即用戶(hù)是否正在與頁(yè)面交互
//頁(yè)面僅僅位于屏幕可視區(qū)域，而用戶(hù)沒(méi)有與之交互時(shí)返回false。
document.hasFocus::Void->Boolean
設(shè)置子元素獲得焦點(diǎn)時(shí)，該元素的樣式
:focus-within，用于設(shè)置當(dāng)子元素處于focus狀態(tài)時(shí)，該元素的樣式。
兼容性:Chrome63開(kāi)始支持。
示例：二次確認(rèn)密碼時(shí)，密碼框高亮
.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è)置<html>元素的樣式，從IE9開(kāi)始支持。
:checked，用于設(shè)置單選和復(fù)選控件被選中的樣式，從IE9開(kāi)始支持。結(jié)合偽元素::before和content屬性可以實(shí)現(xiàn)靈活高效的自定義單選和復(fù)選控件。
:empty，用于設(shè)置沒(méi)有子節(jié)點(diǎn)的元素的樣式。p{}為存在TEXT_NODE子節(jié)點(diǎn)的元素，而p{}則為沒(méi)有子節(jié)點(diǎn)的元素。
:not，作為謂語(yǔ)表達(dá)取反的語(yǔ)義。
:placeholder-shown，用于設(shè)置元素placeholder顯示時(shí)的樣式。
到此，相信大家對(duì)“CSS偽類(lèi)選擇器的知識(shí)點(diǎn)有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
