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 节点的文本 |