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

  • 相关阅读:
    Queue
    Singly-Linked List
    Array
    HTTP请求详解
    封装element的API
    uniapp登录逻辑
    Selector学习笔记 (未完待续)
    <Scalable IO in Java>学习
    Spring PropertyMapper源码阅读笔记
    leetcode 字节跳动探索系列
  • 原文地址:https://www.cnblogs.com/edeny/p/9230510.html
Copyright © 2011-2022 走看看