CSS 选择器
简单选择器
- element selectors
- ID selectors
- class selectors
Attribute selectors 属性选择器
1. Presence and value attribute selectors
| 选择器 |
说明 |
| [attr] |
选择所有带有 attr 属性的元素 |
| [attr=val] |
选择所有属性 attr = val 的元素 |
| [attr~=val] |
选择 attr 的值是以空格为区分的带有 val 的元素 |
<li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
[data-vegetable~="spicy"] {
color: red;
}
2. Substring value attribute selectors
| 选择器 |
说明 |
| [attr |
=val] |
属性就是 val 或者以 val- 开始 |
| [attr^=val] |
以 val 开始. |
| [attr$=val] |
以 val 结束. |
| [attr*=val] |
包含 val 的 |
Pseudo-classes and pseudo-elements 伪类和伪元素
1. 伪类
| 伪类 |
说明 |
| :active |
| :any |
| :checked |
| :default |
| :dir() |
| :disabled |
| :empty |
| :enabled |
| :first |
| :first-child |
| :first-of-type |
| :fullscreen |
| :focus |
| :hover |
| :indeterminate |
| :in-range |
| :invalid |
| :lang() |
| :last-child |
| :last-of-type |
| :left |
| :link |
| :not() |
| :nth-child() |
| :nth-last-child() |
| :nth-last-of-type() |
| :nth-of-type() |
| :only-child |
| :only-of-type |
| :optional |
| :out-of-range |
| :read-only |
| :read-write |
| :required |
| :right |
| :root |
| :scope |
| :target |
| :valid |
| :visited |
2. 伪元素
| 伪元素 |
说明 |
| ::after |
| ::before |
| ::first-letter |
| ::first-line |
| ::selection |
| ::backdrop |
Combinators
| 样式 |
说明 |
| AB |
同时满足A和B |
| A B |
a child, or a child of a child 孩子或者孩子的孩子等 |
| A > B |
直接孩子 |
| A + B |
相同父亲的下一个孩子，自己的兄弟, the next child of the same parent |
| A ~ B |
one of the next children of the same parent |
说明A + B，这个叫做相邻兄弟选择器(Adjacent sibling combinator)：
说明A ~ B，这个叫做通用兄弟选择(General sibling combinator)：
Multiple selectors
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, 'sans serif';
}
参考
CSS Selectors
Child and Sibling Selectors