【CSS】可能是最全最易記的CSS選擇器分類大法
前言
最近查看了幾位同事的代碼，發(fā)現(xiàn)很多CSS書寫習(xí)慣都是清一色的類名而沒有相應(yīng)的選擇器，層層嵌套的標(biāo)簽都包含至少一個類名。有些同學(xué)會問，很多文章都說「選擇器」有性能問題，為什么還需要使用「選擇器」呢？
是的，「選擇器」和「類名」對比起來性能上確實沒有后者那么好，但是如今瀏覽器對于CSS的解析速度已得到大大的提升，完全可忽略「選擇器」那丁點的性能問題。有興趣的同學(xué)可自行百度搜索CSS選擇器性能的相關(guān)問題進行學(xué)習(xí)。多一個技巧多一份保障！
本文不細說「選擇器」的性能問題，先來對選擇器做一個功能性的分類。當(dāng)然，熟悉全部CSS選擇器是玩轉(zhuǎn)CSS的最最最最最基本功。本文是玩轉(zhuǎn)CSS的入門講解，先來把基礎(chǔ)搞掂，后續(xù)的CSS文章再為大家講解如何妙用選擇器，喜歡CSS并且想玩CSS的可持續(xù)關(guān)注我喲。
分類
在講解選擇器的奇妙用處之前，還是先把選擇器進行分類記憶吧。沒錯，我就是喜歡總結(jié)。由于選擇器的標(biāo)準(zhǔn)概念上沒有作出明確的分類，以下的分類是為了方便記憶進行整理的，僅供參考不喜勿噴。
?基礎(chǔ)選擇器
?
| 選擇器 | 別名 | 說明 | 版本 |
|---|---|---|---|
tag | 標(biāo)簽選擇器 | 指定類型的標(biāo)簽 | 1 |
#id | ID選擇器 | 指定身份的標(biāo)簽 | 1 |
.class | 類選擇器 | 指定類名的標(biāo)簽 | 1 |
* | 通配選擇器 | 所有類型的標(biāo)簽 | 2 |
?層次選擇器
?
| 選擇器 | 別名 | 說明 | 版本 |
|---|---|---|---|
elemP elemC | 后代選擇器 | 元素的后代元素 | 1 |
elemP>elemC | 子代選擇器 | 元素的子代元素 | 2 |
elem1+elem2 | 相鄰?fù)x擇器 | 元素相鄰的同胞元素 | 2 |
elem1~elem2 | 通用同胞選擇器 | 元素后面的同胞元素 | 3 |
?集合選擇器
?
| 選擇器 | 別名 | 說明 | 版本 |
|---|---|---|---|
elem1,elem2 | 并集選擇器 | 多個指定的元素 | 1 |
elem.class | 交集選擇器 | 指定類名的元素 | 1 |
?條件選擇器
?
| 選擇器 | 說明 | 版本 |
|---|---|---|
:lang | 指定標(biāo)記語言的元素 | 2 |
:dir() | 指定書寫方向的元素 | 4 |
:has | 包含指定元素的元素 | 4 |
:is | 指定條件的元素 | 4 |
:not | 非指定條件的元素 | 4 |
:where | 指定條件的元素 | 4 |
:scope | 指定元素作為參考點 | 4 |
:any-link | 所有包含href的鏈接元素 | 4 |
:local-link | 所有包含href且屬于絕對地址的鏈接元素 | 4 |
?行為選擇器
?
| 選擇器 | 說明 | 版本 |
|---|---|---|
:active | 鼠標(biāo)激活的元素 | 1 |
:hover | 鼠標(biāo)懸浮的元素 | 1 |
::selection | 鼠標(biāo)選中的元素 | 3 |
?狀態(tài)選擇器
?
| 選擇器 | 說明 | 版本 |
|---|---|---|
:target | 當(dāng)前錨點的元素 | 3 |
:link | 未訪問的鏈接元素 | 1 |
:visited | 已訪問的鏈接元素 | 1 |
:focus | 輸入聚焦的表單元素 | 2 |
:required | 輸入必填的表單元素 | 3 |
:valid | 輸入合法的表單元素 | 3 |
:invalid | 輸入非法的表單元素 | 3 |
:in-range | 輸入范圍以內(nèi)的表單元素 | 3 |
:out-of-range | 輸入范圍以外的表單元素 | 3 |
:checked | 選項選中的表單元素 | 3 |
:optional | 選項可選的表單元素 | 3 |
:enabled | 事件啟用的表單元素 | 3 |
:disabled | 事件禁用的表單元素 | 3 |
:read-only | 只讀的表單元素 | 3 |
:read-write | 可讀可寫的表單元素 | 3 |
:target-within | 內(nèi)部錨點元素處于激活狀態(tài)的元素 | 4 |
:focus-within | 內(nèi)部表單元素處于聚焦?fàn)顟B(tài)的元素 | 4 |
:focus-visible | 輸入聚焦的表單元素 | 4 |
:blank | 輸入為空的表單元素 | 4 |
:user-invalid | 輸入合法的表單元素 | 4 |
:indeterminate | 選項未定的表單元素 | 4 |
:placeholder-shown | 占位顯示的表單元素 | 4 |
:current() | 瀏覽中的元素 | 4 |
:past() | 已瀏覽的元素 | 4 |
:future() | 未瀏覽的元素 | 4 |
:playing | 開始播放的媒體元素 | 4 |
:paused | 暫停播放的媒體元素 | 4 |
?結(jié)構(gòu)選擇器
?
| 選擇器 | 說明 | 版本 |
|---|---|---|
:root | 文檔的根元素 | 3 |
:empty | 無子元素的元素 | 3 |
:first-letter | 元素的首字母 | 1 |
:first-line | 元素的首行 | 1 |
:nth-child(n) | 元素中指定順序索引的元素 | 3 |
:nth-last-child(n) | 元素中指定逆序索引的元素 | 3 |
:first-child | 元素中為首的元素 | 2 |
:last-child | 元素中為尾的元素 | 3 |
:only-child | 父元素僅有該元素的元素 | 3 |
:nth-of-type(n) | 標(biāo)簽中指定順序索引的標(biāo)簽 | 3 |
:nth-last-of-type(n) | 標(biāo)簽中指定逆序索引的標(biāo)簽 | 3 |
:first-of-type | 標(biāo)簽中為首的標(biāo)簽 | 3 |
:last-of-type | 標(biāo)簽中為尾標(biāo)簽 | 3 |
:only-of-type | 父元素僅有該標(biāo)簽的標(biāo)簽 | 3 |
?屬性選擇器
?
| 選擇器 | 說明 | 版本 |
|---|---|---|
[attr] | 指定屬性的元素 | 2 |
[attr=val] | 屬性等于指定值的元素 | 2 |
[attr*=val] | 屬性包含指定值的元素 | 3 |
[attr^=val] | 屬性以指定值開頭的元素 | 3 |
[attr$=val] | 屬性以指定值結(jié)尾的元素 | 3 |
[attr~=val] | 屬性包含指定值(完整單詞)的元素(不推薦使用) | 2 |
[attr\|=val] | 屬性以指定值(完整單詞)開頭的元素(不推薦使用) | 2 |
?偽元素
?
| 選擇器 | 說明 | 版本 |
|---|---|---|
::before | 在元素前插入的內(nèi)容 | 2 |
::after | 在元素后插入的內(nèi)容 | 2 |
優(yōu)勢
話說選擇器如果沒有用處，那W3C還干嘛把它納入到標(biāo)準(zhǔn)里面呢？選擇器的劣勢就不多說了，使用不當(dāng)可能會引起解析性能問題，這個對于現(xiàn)代瀏覽器來說幾乎可忽略，除非你還是IE的忠實粉絲。使用選擇器有什么好處呢，我給大家總結(jié)一下。
對于那些結(jié)構(gòu)與行為分離的寫法，使用 Sass/Less書寫屬性時結(jié)構(gòu)會更加清晰易讀減少很多無用或者少用的類名，保持 css文件的整潔性和觀賞性，代碼也是一門藝術(shù)減少修改類名而有可能導(dǎo)致樣式失效的問題，有時修改類名沒有確保HTML中和CSS中的一致而導(dǎo)致樣式失效 減少沒有實質(zhì)性使用的類名，例如很多層嵌套的標(biāo)簽，這些標(biāo)簽可能只使用到一個CSS屬性，就沒有必要建個類名來關(guān)聯(lián) 使用選擇器可完成很多曾經(jīng)需要配合JS來完成的交互效果，既可減少代碼量也可減少JS對DOM的操作，使得交互效果更流暢
總結(jié)
大家可看看我寫的這篇接近10萬閱讀量的文章《靈活運用CSS開發(fā)技巧》，點擊下方「閱讀原文」即可。羅列了66個CSS開發(fā)技巧，其中大多數(shù)效果是基于選擇器實現(xiàn)的，有興趣的小伙伴可詳細查閱代碼，了解下選擇器的開發(fā)技巧和使用場景。
「歡迎關(guān)注「前端雜貨鋪」，一個有溫度且致力于前端分享的雜貨鋪」
「關(guān)注回復(fù)「加群」，可加入雜貨鋪一起交流學(xué)習(xí)成長」