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. .header ul li{
  2.     /* 权重 12 : 10+1+1 */
  3.   backgournd:red;
  4. }
  6. .header .right li{
  7.     /* 权重 21:10+10+1 */
  8.   backgournd:#000;
  9. }
  • 权重相等的情况下比较

    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 > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承