继承性与层叠性

1.继承性和层叠性

1.继承性

• 可以继承上级的css属性元素，结构样式不会继承，只会继承一些文字样式
  例如：容器div设置了属性，嵌套的其他标签不设置任何css属性，其结果展示却是下图的效果。这说明div的css属性作用到了其子类。

效果图

通过查看控制台，我们发现，确实是这样，如下图：

控制台展示图

2.层叠性

（1）选中时

• 当一个标签被多个选择器选中时，那么该如何呈现呢，这就涉及到了选择器的权重问题。

• 其中基础选择器：id>类>标签，通配符最低
  例如这段代码：

  层叠性

  p {
    color: red;
   }
  .one {
    color: yellow;
   }
  #ppp {
    color: blue;
  }
  

控制台展示图：权重比较低的选择器不起作用，被划掉了。

• 当有高级选择器时，需通过计算基础选择器的个数来计算权重，依次比较id，类，标签的个数。先比较id个数，取其个数多的；当id个数相同时，比较类；类也相同则比较标签。

• 权重相同时，由于代码从上到下执行，所以下边的起作用

  
      
  
          
  
              
  我的颜色
          
      
  
  

  如下图计算，id选择器个数最多，所以第一个选择器起作用，为蓝色

  
  
  权重计算

注意

• 当有交集时，所有的都要算上比如 div2.#id2，那么算是1个id+1个类

• 当有并集时，只计算要比较的标签，不相关的可以先忽略

  交集：id，类，标签的值为：1，3，1
  .div1 .div2#id2 .div3 p {
      color: yellow;
  }
  
  并集：id，类，标签的值为：1，3，1
  .div1 .div2#id2 .div3 p, .ppp p {
      color: yellow;
  }
  等价于下边两个选择器
  .div1 .div2#id2 .div3 p {
      color: yellow;
  }
  /*.ppp p就不参与比较了*/
  .ppp p {
      color: yellow;
  }
  

（2）未选中时

• 没有选中到指定标签，则从上级查找，找那个离的最近的起作用。多个选择器都未选中，还是得去比较权重，还相同，则看代码执行顺序。

（3）* 关键值!important

• 给单一属性添加，将属性的权重提高到最大。

• 未选中时，不起作用。还是得去离的最近的上级中查找

  .div1 .div2#id2 .div3 p {
      color: yellow !important; 
  }
  

选中时： 优先级： !important > 权重>顺序
未选中时： 优先级：上级近> !important > 权重>顺序