CSS 选择器
常用 CSS 选择器名称和功能
| 选择器名称 | 实例 | 功能 |
|---|---|---|
| #id | #div | 获取 id=”#div” 的元素 |
| .class | .red | 获取 class=”red” 的全部元素 |
| element | div | 获取所有 元素 |
| element element | div p | 获取 元素中的所有内部 元素 |
| element,element | div,p | 获取全部 元素和全部 元素 |
| element>element | div>p | 获取父元素为 元素的所有 元素 |
| element+element | div+p | 获取紧接在 元素后的所有 元素 |
| * | * | 获取所有元素 |
属性选择器名称和功能
| 选择器名称 | 实例 | 功能 |
|---|---|---|
| [attribute] | [title] | 选择带有 title 属性的全部元素 |
| [attribute=value] | [title=abc] | 选择 title 属性值为 abc 的全部元素 |
| [attribute~=value] | [title~=abc] | 选择 title 属性包含单词 abc 的全部元素 |
| [attribute|=value] | [title|=abc] | 选择 title 属性等于 abc 或以 abc- 开头的所有元素 |
| [attribute^=value] | [title^=“abc”] | 选择 title 属性值以 abc 开头的全部元素 |
| [attribute=$value] | [title$=“abc”] | 选择 title 属性值以 abc 结尾的全部元素 |
| [attribute*=value] | [title*=”abc“] | 选择 title 属性值中包含 abc 的全部元素 |
伪元素选择器名称和功能
| 选择器名称 | 实例 | 功能 |
|---|---|---|
| :first-letter | p:first-letter | 获取每个 p 元素的首个字母 |
| :first-line | p:first-line | 获取每个 p 元素的第一行 |
| :before | p:before | 在每个 p 元素的内容之前插入内容 |
| :after | p:after | 在每个 p 元素的内容之后插入内容 |
普通伪类选择器名称和功能
| 选择器名称 | 实例 | 功能 |
|---|---|---|
| :root | :root | 获取文档的根元素 |
| :empty | p:empty | 获取没有子类元素的每个 p 元素，包括文本节点 |
| :target | #nav.target | 获取当前活动的 #nav 元素 |
| :enabled | input:enabled | 获取每个可用的 input 元素 |
| :disabled | input:disabled | 获取每个禁用的 input 元素 |
| :checked | input:checked | 获取每个被选中的 input 元素 |
| :not(selector) | :not(p) | 获取非 p 元素的每个元素 |
结构化伪类选择器名称和功能
| 选择器名称 | 实例 | 功能 |
|---|---|---|
| :first-child | li:first-child | 选择每个子类 li 元素的第一个元素 |
| :last-child | li:last-child | 选择每个子类 li 元素的最后一个元素 |
| :first-of-type | li:first-of-type | 选择每个子类 li 元素的第一个元素 |
| :last-of-type | li:last-of-type | 选择每个子类 li 元素的最后一个元素 |
| :only-of-type | li:only-of-type | 选择每个 li 元素是其父级的唯一元素 |
| :nth-child(n) | li:nth-child(2) | 选择每个子类 li 元素的第二个元素 |