1、選擇器

名稱 說明
查找元素
* 通配
#id ID選擇器
.class 類選擇器
element 該名稱的所有元素
s1,s2 多個參數用逗號隔開
基本選擇器
li a a是li的后代,用空格隔開
parent>child 直接子節點,child為*表示所有直接子節點
s+next 選擇s之后的一個元素
s~siblings s的所有兄弟元素
基本篩選器
:not(s) 除s之外的所有元素
:first 第一個
:last 最后一個
even 偶 ,從0開始計數
odd
:eq(index) 相等
:gt(index) 大于索引
:lt(index) 小于索引
:header 所有標題元素
:focus 焦點元素
:animated 正在進行動畫的元素
內容篩選器
:contains('text') 包含指定文本的元素
:empty 沒有子節點的所有元素
:parent 擁有子節點或文本的元素
:has(s) 包含選擇器的節點
可見性篩選器
:hidden 所有隱藏元素,設置為 display:none, 帶有type="hidden" 的表單元素,width 和 height 設置為 0,隱藏的父元素(這也會隱藏子元素)
:visible 占據空間的元素, visibility:hidden 和 opacity: 0
子節點篩選器
:nth-child(expr) 從1開始索引
:first-child 第一個子節點
:last-child 最后一個子節點
:only-child 唯一的子節點
屬性篩選器
[attr] 擁有指定屬性
[attr='value'] 擁有指定值屬性
[attr!='value'] 不為value
[attr^='value'] 以value開頭
[attr$='value'] 以value結尾
[attr*='value'] 包含value
[attr|='value'] value或value-*
[attr~='value'] 空格分開的屬性其中有value
[attr1] [attr2] 多個屬性選擇器
表單
:input 所有input
:text
:password
:radio
:checkbox
:submit
:reset
:image
:button
:file
:selected 下拉列表中所有被選中選項
:enabled 可用表單元素
:disabled 使用css的disabled屬性
:checked 被選中的選項
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容