CSS selectors - Sum Up,
basic selector
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
senior selector
| 选择器 | name | 描述 | |
|---|---|---|---|
| combinator | E F | descendant | F 是 E 的descendant。选择 F |
| combinator | E > F | child | F 是 E 的child。选择F |
| combinator | E + F | adjacent sibling | F 是 E 的adjacent sibling。选择 F |
| combinator | E ~ F | sibling | F 是 E 的后续的siblings。选择 F |
| 并集 | E, F | grouping selector | 选择 E 和 F的并集 |
| 交集 | EF | 选择 E 和 F的交集 | |
| attribute | [attr] | 选择具有 attr属性 的元素 | |
| [attr = "value"] | 选择具有 attr属性 且值为 value 的元素 | ||
| [attr ~= "value"] | 带有属性 attr attr的值是一个以空格为分隔的值列表，列表至少有一个值为 value |
||
| [attr |= "value"] | 带有属性 attr, attr的值或者为 'value' ，或者以 'value-' 开头 | ||
| [attr ^= "value"] | 带有属性 attr, attr的值以 'value' 开头 | ||
| [attr $= "value"] | 带有属性 attr, attr的值以 'value' 结尾 | ||
| [attr *****= "value"] | 带有属性 attr, attr的值含有 'value' | ||
| [attr operator value i] | Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively | ||
| [attr operator value s] | Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively | ||
| 动态伪类 | a:link | 链接 | 选中a元素 |
| a:visited | 链接 | 选中a元素，且该元素已被访问 | |
| E:active | 链接，button | 选中E元素，该元素已被激活但尚未抬起鼠标 | |
| E:hover | 用户行为 | 选中E元素，且鼠标悬停在E元素上 | |
| E:focus | 表单 | 选中E元素，且E获得了焦点 | |
| 目标伪类 | E:target | 选中E元素，且E元素的ID的value和当前网页的RUL的fragment相同 | |
| UI状态伪类 | E:checked | 选中状态 | 选中被勾选的radio 或 checkbox 表单 |
| E:enabled | 启用状态 | 选中被启用的radio 或 checkbox 表单 | |
| E:disabled | 禁用状态 | 选中被禁用的radio 或 checkbox 表单 | |
| 结构伪类 | :first-child | parent的第一个child | |
| :last-child | parent的最后一个child | ||
| E:first-of-child | parent的第一个E类型的child | ||
| E:last-of-child | |||
| :root | 根元素，即 | ||
| :nth-child(n) | n可以是整数、关键字（even，odd）、公式（2n / 2n+1）。n起始值为1 | ||
| :nth-last-child(n) | |||
| E:nth-of-type(n) | 父元素的第n个E类型的child | ||
| E:nth-last-of-type(n) | |||
| :only-child | only child | ||
| :only-of-type | |||
| :empty | 选中没有child的元素，并且也不含任何text | ||
| negation | :not(F) | F之外的所有元素 |
Note: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.