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

  • 相关阅读:
    回文字符串问题
    Linux添加nfs共享存储盘
    解读nginx配置
    制作自己的nginx rpm包
    linux编译安装时常见错误解决办法
    redis单机及集群安装
    nginx ssl
    vsftp配置详解
    Linux-文件系统的简单操作
    Linux-Vim编辑器
  • 原文地址:https://www.cnblogs.com/zh-lei/p/9299644.html
Copyright © 2011-2022 走看看