CSS選擇器———寫給幾個月後我的筆記

02-02

前言：所謂的好記性爛筆頭教會了我，原來記憶和理解打的是長久戰，也許看一眼的東西馬上能理解，但這並不保證我能在幾個月後還記得這東西。也許到時我就連這是什麼都說不出來，為防止這情況發生，來記下我這是的理解和想法，通過文章的方式來講述我的理解，這也許是最好的筆記。文章有參考了網上的資料來整理，如果你想看原文，最下面有鏈接。

在CSS里，選擇器定位我們想要樣式化的元素。各種各樣的選擇器可以方便精確地定位元素。

選擇器可以分為5個類別：

簡單選擇器：通過元素類型，class或者id選擇一個或多個元素；
屬性選擇器：通過指定屬性或加上屬性值來匹配元素；
偽類：匹配處於某些狀態的元素，例如滑鼠懸停；
偽元素：匹配某個特定位置的元素，例如每段首字母；
組合選擇器：一種將不同選擇器組合起來選擇的方法，也是很常見的用法；

簡單選擇器

標籤選擇器：

選擇器的名字和HTML里元素名的匹配，並不區分大小寫。

類選擇器：

以一個點（ $.$ ）加類名組合使用，類名在HTML里屬性「class」里設置，可以設置多個。

ID選擇器：

以哈希/磅符號（#）和給定的ID名稱組成，ID名在HTML里屬性「id」里設置，但只可以設置一個，而且最好不要重複。

通用選擇器：

通用選擇（*）泛指所有元素，很少單獨使用，通常與其他選擇器結合使用

屬性選擇器：

屬性選擇器比較特殊，根據屬性和屬性值來匹配元素，通常用方括弧（[]）來表示，裡面寫有屬性，或者加上屬性值。屬性選擇器還可以根據匹配的屬性值來分為兩種屬性選擇器：存在和值選擇器加子串值選擇器。

存在和選擇器：

假如元素的屬性你已經非常明確了，那麼這種屬性選擇器就可以用上。

[attr]：匹配含有此屬性的所有元素；
[attr=val]：僅匹配有且屬性值為val的所有元素；
[attr~=val]：僅匹配有且屬性值含有val的所有元素，範圍比上面的廣泛，例如class可以設多個類；

子串值選擇器：

這種屬性選擇採用類似正則匹配的方法來匹配元素，有點像在淘寶輸入某些關鍵詞就給你列出一堆相關的商品。

[attr|=val]：匹配屬性值以val（包括自己）或val-開頭的元素；
[attr^=val]：匹配屬性值以val（包括自己）開頭的元素；
[attr$=val]：匹配屬性值以val（包括自己）結尾的元素；
[attr*=val]：匹配屬性值含有val字元串的元素；

偽選擇器

偽選擇器包括了偽類和偽元素，他們不是某類元素，而是元素處於某些狀態，或者元素的某個位置。

偽類：

偽類是前面帶有冒號（:）的關鍵字，前面加上需要選取的元素，那麼這個元素的某種狀態（如：滑鼠懸停）或者某個位置（如：父元素的第一個子元素）就能被選中。

:active{/*滑鼠點擊*/}n:any{/*為解決選擇器過多麻煩，將多個選擇器混合一起組合成單一選擇器*/}n:checked{/*radio或者checkbox類型的input被選中的狀態*/}n:default{/*默認的CSS偽類表示任何形式元素，這是一組相關元素的默認值*/}n:dir(){/*匹配基於它們的文本的定向性的元素*/}n:disabled{/*被禁用的狀態*/}n:empty{/*沒有子節點或者子元素的元素*/}n:enabled{/*啟用激活狀態*/}n:first{/*第一個CSS偽類，與@page at規則一起使用，表示列印文檔的第一頁。*/}n:first-child{/*父元素的第一個子元素*/}n:first-of-type{/*父元素的第一種類型元素，可以多個*/}n:fullscreen{/*當瀏覽器處於全屏模式時顯示的元素*/}n:focus{/*獲得焦點的元素*/}n:focus-within{/*已接收到焦點的元素或子元素已接收焦點的元素，用在form表單試試*/}n:hover{/*滑鼠經過*/}n:indeterminate{/*任何狀態不確定的表單元素*/}n:in-range{/*input設置有範圍限定時使用，表示在範圍內*/}n:invalid{/*表示內容無法驗證的元素，用於input或者form里*/}n:lang(){/*匹配基於它們所決定的語言的元素*/}n:last-child{/*父元素的最後一個子元素*/}n:last-of-type{/*父元素的不同標籤的最後一個子元素*/}n:left{/*左側CSS偽類，與@page at規則一起使用，表示列印文檔的所有左頁*/}n:link{/*鏈接的原始狀態*/}n:not(){/*否定選擇器，括弧里的元素將不會被匹配*/}n:nth-child(){/*匹配父元素的某個子元素，括弧里填數字*/}n:nth-last-child(){/*與nth-child()相似，但從最後開始數起*/}n:nth-last-of-type(){/*與nth-of-type()相似，從最後開始數起*/}n:nth-of-type(){/*匹配父元素下第幾個類型的元素，可以多個*/}n:only-child{/*父元素只有一個子元素的元素*/}n:only-of-type{/*父元素只有一個類型元素的元素*/}n:optional{/*匹配當input,textarea和select沒有設置required屬性*/}n:out-of-range{/*input設置有範圍限定時使用，表示在範圍外*/}n:read-only{/*表示那些設置了read-only狀態的表單元素*/}n:read-write{/*表示那些設置了read-write狀態的表單元素*/}n:required{/*匹配當input,textarea和select有設置required屬性*/}n:right{/*右側CSS偽類，與@page at規則一起使用，表示列印文檔的所有右頁*/}n:root{/*就是表示根元素HTML*/}n:scope{/*匹配作為選擇符匹配元素的參考點(css的作用域或作用點),晦澀解釋不了*/}n:target{/*當有錨點鏈接時，這個匹配上錨點鏈接到目標元素*/}n:valid{/*與:invalid相反，匹配當表單內容正確時的表單元素*/}n:visited{/*鏈接過的元素*/}n

偽元素：

有點像偽類，但通常用兩個冒號（::）區別。

::after{/*所選元素的最後一個子元素後創建一個偽元素，默認內聯元素*/}
::before{/*所選元素的首個子元素前創建一個偽元素，默認內聯元素*/}
::first-letter{/*選中一整塊文字第一行的第一個字母，當文字所處的行之前沒有其他內容（如圖片和內聯的表格）*/}
::first-line{/* 將樣式只應用於一個塊狀元素的首行*/}
::selection{/*應用於文檔中被用戶高亮的部分（比如滑鼠選中的部分）*/}

::backdrop{/*在全屏模式下立即呈現的一個框*/}

組合選擇器

組合器的使用需要稍微注意下權值問題，例如

<div id="box">n <p>content</p>n</div>n

這時候選擇器div p和#box p兩個雖然都是選擇p元素，但後一個的權值會更高，如果兩個都寫上樣式，則後一種的樣式會生效。關於權值的排行，這裡也列出來（由高到低）：

在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
作為style屬性寫在元素標籤上的內聯樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標籤選擇器
通配符選擇器
瀏覽器自定義

用法如下

E,Ft多元素選擇器，用,分隔，同時匹配元素E或元素F

E Ft後代選擇器，用空格分隔，匹配E元素所有的後代（不只是子元素、子元素向下遞歸）元素F
E>Ft子元素選擇器，用>分隔，匹配E元素的所有直接子元素
E+Ft直接相鄰選擇器，匹配E元素之後的相鄰的同級元素F
E~Ft普通相鄰選擇器（弟弟選擇器），匹配E元素之後的同級元素F（無論直接相鄰與否）
.class1.class2tid和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
element#idtid和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素

資料來源有：

選擇器developer.mozilla.org