CSS偽類選擇器的知識點(diǎn)有哪些

本篇內(nèi)容主要講解“CSS偽類選擇器的知識點(diǎn)有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS偽類選擇器的知識點(diǎn)有哪些”吧!

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)玉山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

偽類

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

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

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

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

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

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

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

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

&emsp;還記得URL中的井號嗎？從井號(#)開始到URL的末尾稱為URL的hash或fragment，用于定位頁面內(nèi)某項(xiàng)資源。假設(shè)現(xiàn)在頁面存在<h4id="title">Target</h4>的元素，那么只要地址欄輸入#title瀏覽器就會不斷滾動(滾動不一定存在補(bǔ)間動效)直到元素h4#title位于可視區(qū)的特定位置。（注意：請不要和UIRouting混為一談）

&emsp;而上述這個(gè)被定位的頁面資源，被稱為目標(biāo)元素或當(dāng)前活動元素！可通過:target設(shè)置其樣式。

&emsp;兼容性：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è)置元素獲得焦點(diǎn)時(shí)的樣式

:focus用于設(shè)置元素處于focus狀態(tài)下的樣式。

兼容性：IE8開始支持。

那么哪些元素支持focus狀態(tài)呢？那要先弄清楚通過哪些操作可能實(shí)現(xiàn)focus。

它們分別是：

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

Tab鍵;

通過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:solid1pxskyblue;

}

&:not(:focus){

border:solid1pxorange;

}

}

}

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

其他

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

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

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

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

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

CSS偽類選擇器的知識點(diǎn)有哪些

到此，相信大家對“CSS偽類選擇器的知識點(diǎn)有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁標(biāo)題：CSS偽類選擇器的知識點(diǎn)有哪些
網(wǎng)址分享：http://bm7419.com/article14/igsede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司