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

  • 相关阅读:
    Git 基本操作
    Git 基础
    MarkDown教程
    Python常用函数
    Python生成器
    Python列表生成式
    Python迭代
    Python切片
    Python函数
    Python不可变对象
  • 原文地址:https://www.cnblogs.com/liuye1990/p/9478390.html
Copyright © 2011-2022 走看看