CSS 选择器种类
- id 选择器 #myid
- 类选择器 .classname
- 标签选择器 div
- 后代选择器 div p
- 子选择器 div > p
- 兄弟选择器 div ~ p
- 相邻兄弟选择器 div + p
- 属性选择器 a[rel="external"]
- 伪类选择器 a:hover，li:first-child
- 伪元素选择器 a::before，a:after
- 通配符选择器 *
伪元素和伪类的区别
- 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态
- 伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中
权重
权重大小
- !important，权重无穷大
- 行内样式，权重 1000
- id 选择器，权重 100
- 类选择器、属性选择器和伪类选择器，权重 10
- 标签选择器和伪元素选择器，权重 1
- 通配符，权重 0
权重作用
- 一般来说，权重大的样式生效
- 相同的权重，后面的规则覆盖前面的规则
- 拥有更高权重等级的 css 权重更高。例如 11 个 class 和一个 id，利用前述的计算方法 11 个 class 的权重为 110，id 权重为 100，class 权重值更大，但是这并不成立，这种情况下之前的计算方法不再适用。