CSS 选择器

语法 解释
* 匹配所有节点
#container 匹配 id 为 container 的节点
.container 匹配所有 class 包含 container 的节点
div,p 匹配所有 div 和 p 节点
li a 匹配所有 li 下所有 a 节点
ul + p 匹配 ul 后面的第一个 p 节点
div#container > ul 匹配 id 为 container 的 div 的第一个 ul 子节点
ul ~p 匹配与 ul 同级的所有 p 节点
a[title] 匹配所有含 title 属性的 a 节点
a[href="123"] 匹配所有 href 属性为 123 的 a 节点
a[href^="123"] 匹配所有 href 属性以 123 开头的 a 节点
a[href$="123"] 匹配所有 href 属性以 123 结尾的 a 节点
input[type=radio]:checked 匹配 type 属性为 radio 的且被选中的 input 节点
:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)
单选:radio    复选:checkbox
div:not(#container) 匹配所有 id 为非 container 的 div 节点
li:nth-child(3) 匹配第 3 个 li 节点
li:nth-child(n) 匹配属于其父节点的第 n 个子节点(li),不论元素的类型。
n 可以是数字、关键词或公式。demo
a::attr(href) 匹配 a 节点的 href 属性
a::text 匹配 a 节点的文本
Table of Contents