继承性与层叠性

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 > 权重>顺序

你可能感兴趣的:(继承性与层叠性)