3.1 层叠性

浏览器解析CSS是从上至下,当CSS冲突时以最后定义的CSS为准。
层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义

标记字号大小为12像素,链入式定义

标记颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加

3.2 优先级

优先级顺序为:!important>style>权重值

权重记忆口诀:从0开始,一行内样式+1000,一个id+100,一个属性选择器/class或者一个元素名+10,或者伪元素+1

规则:相同的权重:以后面出现的选择器为最后规则
不同的权重,权重值生效

3.1.1 基本选择器

类型 权重
标签选择器/div 1
class/类选择器 .right 10
id 100
内联 1000
* 0-1
  • 后代
  • 子代
  • 交集
  • 并集
  • 相邻兄弟
  • 兄弟
  • 属性
  • 伪类
  • 伪元素

权重:每个单独的选择器的权重相加之和

1
2
3
4
5
6
7
8
9
.header ul li{
/* 权重 12 : 10+1+1 */
backgournd:red;
}

.header .right li{
/* 权重 21:10+10+1 */
backgournd:#000;
}
  • 权重相等的情况下比较

    id>class>标签>*

  1. 权重不相等的情况下: 谁的权重大,听谁的
  2. 权重相等的情况下:遵循就近原则,下面的覆盖上面的
  3. 权重相等,不遵循就近原则,就想听上面的怎么办
    1. !important 1000

3.2.1 权重算法

第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
优先级从高到低:行内选择符、ID选择符、类别选择符、元素选择符。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承