今天面试被问到了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
选取唯一的某个元素类型。如果元素的父元素只有它一个当前类型的子元素就会生效。
伪元素
- ::first-line
为元素的第一行使用样式
- ::first-letter
为某个元素的首字母或第一个文字使用样式
- ::before
在某个元素之前插入内容
- ::after
在某个元素之后插入内容
- ::selection
对光标选中的元素添加样式
选择器权重
- 第一优先级：无条件优先的属性只需要在属性后面使用
!important。它会覆盖页面内任何位置定义的元素样式。
- 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
- 第二等：ID选择器，如：#header，权值为0100.
- 第三等：类选择器、属性选择器和伪类选择器、如：.bar， 权值为0010.
- 第四等：标签选择器和伪元素选择器，如：div ::first-line 权值为0001.
- 继承的样式没有权值。
CSS 之 选择器
原文：https://www.cnblogs.com/xuchengrui/p/13151787.html
