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,因为使用它会影响页面的布局

  • 相关阅读:
    iris中间件
    go并发设计模式 --资源生成器模式
    Navicate
    golang sftp传输文件
    升级python
    在centos上面开机自启动某个程序
    文件MD5
    python模块之logging
    python之八大排序方法
    python生成器
  • 原文地址:https://www.cnblogs.com/majj/p/9037390.html
Copyright © 2011-2022 走看看