CSS 选择器顺序

CSS 选择器顺序

CSS是什么？

css的翻译是层叠样式表，意思就是对于一个元素来说，相同一个属性我们可以通过不同的选择器给它多次设置，这样子属性就会被一层层覆盖上去，但最终只有一个会生效。

优先顺序

有了上文的解释，我们就会有个疑问，那么多个样式属性覆盖上去，哪一个生效呢？

• 选择器的权重，权重大的生效，根据权重可以判断优先级
• 先后顺序，权重相同时，后面设置的生效

那么权重怎么知道呢？

为了方便比较css属性优先级，可以给css属性定义一个权重（权值）

• ！important: 10000
• 内样样式：1000
• id选择器：100
• 类选择器，属性选择器，伪类：10
• 元素选择器，伪元素：1
• 通配符：0

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*=“en-US”] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

选择器常见种类

选择器常见种类大概介绍

具体可以参考：developer.mozilla.org/en-US/

1. 通用选择器（universal selector）
2. 简单选择器
   1. 元素选择器 元素名称
   2. 类选择器 .类名
   3. id 选择器 #id
3. 属性选择器 [att], [att = val]
4. 后代选择器
   1. 所有后代 空格分割
   2. 直接子代选择器 >
5. 兄弟选择器
   1. 相邻兄弟选择器 +
   2. 普遍兄弟选择器 ~
6. 交集选择器 div.one 通过为了精准的选择某一个元素
7. 并集选择器 .one, .two
8. 伪类
9. 伪元素