今天面试被问到了css选择器，害，拉胯了。
选择器
基础选择器
| 选择器 | 名称 | 描述 |
|---|---|---|
| * | 通配选择器 | 选择所有的元素 |
| E | 元素选择器 | 选择指定的元素 |
| #idName | id选择器 | 选择id属性等于idName的元素 |
| .className | class选择器 | 选择class属性包含className的元素 |
| E[att] | 属性选择器 | 选择具有att属性的E元素 |
组合选择器
| 选择器 | 名称 | 描述 |
|---|---|---|
| E F | 后代选择器 | 选择所有包含在E元素里面的F元素 |
| E>F | 子元素选择器 | 选择所有作为E元素的子元素F |
| E+F | 相邻选择器 | 选择紧贴在E元素之后的F元素 |
| E~F | 兄弟选择器 | 选择E元素所有兄弟元素F |
| , | 并集选择器 | 用多个逗号分隔多个选择器，形成并集 |
| . | 交集选择器 | 找两个或多个选择器的交集 |
伪类和伪元素选择器
伪类
- 标记状态
- :link 选取未访问过的超链接
- :visited 选取访问过的连接
- :hover 选取鼠标悬浮的元素
- :active 选取点中的元素
- :focus 选取获取焦点的元素
- 筛选功能
- :empty
选取没有子元素的元素 - :checked
选取勾选状态下的input 元素 只对 radio 和checkbox 有效 - :disabled
选取禁用的表单元素 - :first-child
选取当前选择器下的第一个元素 - :last-child
选取当前选择器下的最后一个元素 - :nth-child(an+b)
选取指定位置的元素,参数支持an+b的形势.比如 li:nth(2n+1),就可以选取li元素序号是2的整数倍+1的所有元素,也就是1,3,5,7,9序号的li元素 - :nth-last-child(an+b)
和上面类似,不过从后面选取. - :only-child
选取元素唯一的子元素,如果元素的父元素只有它一个子元素就会生效,如果还有其他的兄弟元素,则不生效 - :only-of-type
选取唯一的某个元素类型。如果元素的父元素只有它一个当前类型的子元素就会生效。
- :empty
伪元素
- ::first-line
为元素的第一行使用样式 - ::first-letter
为某个元素的首字母或第一个文字使用样式 - ::before
在某个元素之前插入内容 - ::after
在某个元素之后插入内容 - ::selection
对光标选中的元素添加样式
选择器权重
- 第一优先级：无条件优先的属性只需要在属性后面使用
!important。它会覆盖页面内任何位置定义的元素样式。 - 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
- 第二等：ID选择器，如：#header，权值为0100.
- 第三等：类选择器、属性选择器和伪类选择器、如：.bar， 权值为0010.
- 第四等：标签选择器和伪元素选择器，如：div ::first-line 权值为0001.
- 继承的样式没有权值。