zoukankan      html  css  js  c++  java
  • 08-层叠性权重相同处理

    第一种现象:当权重相同时,以后来设置的属性为准,前提一定要权重相同

    
    #box2 .wrap3 p{
        color: yellow;
    }
            
    #box1 .wrap2 p{
        color: red;
    }

    我们会发现此时显示的是红色的。

    第二种现象: 第一个选择器没有选中内层标签,那么它是通过继承来设置的属性,那么它的权重为0。第二个选择器选中了内层标签,有权重。

    所以 继承来的元素 权重为0。跟选中的元素没有可比性。

    #box1 #box2 .wrap3{
        color: red;
    }
    #box2 .wrap3 p{
        color: green;
    }

    我们会发现此时显示的是绿色的。

    第三种现象:如果都是继承来的属性,谁描述的近,显示谁的属性。'就近原则'

    #box1 #box2 .wrap3{
        color: red;
    }
     .wrap1 #box2{
        color: green;
    }

    !important 的使用。

    !important:设置权重为无限大 
    !important 不影响继承来的权重,只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

  • 相关阅读:
    3.24课堂
    3.23作业
    3.23课堂
    3.20作业
    3.20课堂
    3.19作业
    3.19课堂
    3.18课堂
    3.18作业
    46、表与表的连接
  • 原文地址:https://www.cnblogs.com/zh-lei/p/9299644.html
Copyright © 2011-2022 走看看