簡單的CSS選擇符
* 所有元素
#id 帶有給定ID的元素
element 給定類型的所有元素
.class 帶有給定類的所有元素
a, b 與a或b匹配的元素
a b 作為a后代b匹配的元素
a > b 作為a子元素的b匹配的元素
a + b 作為a后面直接同輩元素的b匹配的元素
a ~ b 作為a后面同輩的b匹配的元素
在同輩元素間定位
:nth-child(index) 作為其父元素第index個子元素的元素(從1開始計數)
:nth-child(even) 作為其父元素第偶數個子元素的元素(從1開始計數)
:nth-child(odd) 作為其父元素第奇數個子元素的元素(從1開始計數)
:nth-child(formula) 作為其父元素第n個子元素的元素(從1開始計數)。formula(公式)的格式為an + b,a、b為整數 (這個我也不大懂,了解的朋友希望評論告訴我一下,謝謝)
:nth-last-child() 與:nth-child()相同,只不過是從最后一個元素開始倒計數
:first-child 作為其父元素第一個子元素的元素
:last-child 作為其父元素最后一個子元素的元素
:only-child 作為其父元素唯一一個子元素的元素
:nth-of-type() 與:nth-child()相同,只不過只計相同元素
在匹配的元素間定位
:first 結果集中的第一個元素
:last 結果集中的最后一個元素
:not(a) 結果集中與a不匹配的所有元素
:even 結果集中的偶數元素(從0開始計數)
:odd 結果集中的奇數元素(從0開始計數)
:eq(index) 結果集中索引為index的元素(從0開始計數)
:gt(index) 結果集中所有位於給定索引之后(大於該索引)的元素(從0開始計數)
:lt(index) 結果集中所有位於給定索引之后(小於該索引)的元素(從0開始計數
表單
:input 所有<input>、 <select>、<textarea>和<button>元素
:text type = 'text'的<input>元素
:password type = 'password'的<input>元素
:file type = 'file'的<input>元素
:radio type = 'radio'的<input>元素
:checkbox type = 'checkbox'的<input>元素
:submit type = 'submit'的<input>元素
:image type = 'image'的<input>元素
:reset type = 'reset'的<input>元素
:button type = 'button'的<input>元素及<button>元素
:enabled 啟用的表單元素
:disabled 禁用的表單元素
:checked 選中的復選框和單選按鈕元素
: selected 選中的<option>元素
其他自定義選擇符
:root 文檔的根元素
:header 標題元素(如<h1>、<h2>)
:animate 其動畫正在播放的元素
:contains(text) 包含給定文本text的元素
:empty 不包含子節點的元素
:has(a) 后代元素中至少有一個與a匹配的元素
:parent 包含子節點的元素
:hidden 隱藏的元素,包括通過css隱藏的元素及<input type = 'hidden' />
:visible 與:hidden匹配的元素相反
:focus 獲得鍵盤焦點的元素
:lang(language) 具有給定(在元素的lang屬性或<meta>標簽中聲明的)語言代碼的元素
:target URI標識符指向的目標元素