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