• css优先级计算规则——权重


    一、css的优先级

      当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明。

            <style>
                #id{
                    color:red;
                }
                p{
                    color:blue;
                }
            </style>
    
            <div id="te">
           <!-- p元素内的颜色设置为black,因为对p元素的设置,该段代码中行内样式的优先级最高 --!> <p id="id" style="color:black;"></p> </div>

    二、优先级的计算方式——权重

      1、权重计算的基础

        内联样式:1000

        id选择器:0100

        类、伪类、属性选择器:0010

        元素、伪元素选择器:0001

        通配符:0000

      2、比较规则

        a、1,0,0,0 > 0,99,99,99

        b、内部样式和外部样式优先级相同

        c、权重相同的情况下,后写的会覆盖先写的样式

        d、使用后代选择器和子类选择器,则需要把某个元素所有的修饰权值相加,即修饰的越精确,权值越高,如:

             .class p[type="text"]{color:#000;}/*权值:0021*/,

             该样式中,关于p元素的权值为,一个类选择器0010,一个元素选择器0001,一个属性选择器0010,最终结果0021。

     

    <div id="te" class="cte">
        <div>div</div>
        <p type="text">345</p>
        <p id="id">123</p>
        <p class="class">666</p>
        <p text="text">777</p>
        <p style="color=red;"></p><!-- 权值:1000 --!>
    </div>
    
    *{color:green;}/*权值:0000*/
    p{color:#00f;}/*权值:0001*/
    div p{color:orange;}/*权值:0002*/
    .class{color:gray;}/*权值:0010*/
    .class p[type="text"]{color:#000;}/*权值:0021*/
    #id{color:red;}/*权值:0100*/
    div #id{color:red;}/*权值:0101*/

    三、特殊的优先级

      !important,它没有权重,但是加上这个标签后,该声明就是最高优先级,大于内联样式。

      如果在某个声明中加了!important,则该页面中无论后面加了其他什么样的样式,生效的只有这个。

            <style>
                *{
                    color:green!important;
                }            
            </style>        
    就算这个世道烂成一堆粪坑,那也不是你吃屎的理由
  • 相关阅读:
    24.最优布线问题(kruskal算法)
    24.最优布线问题(kruskal算法)
    Algs4-1.4.11为StaticSETofInts添加一个实列方法howMany()
    Algs4-1.4.9预测程序运行时间
    Algs4-1.4.10二分查找找出元素所在的最小索引
    Algs4-1.4.7统计算术运算与比较次数
    Algs4-1.4.8计算输入文件中相等的整数对的数量
    Algs4-1.4.6给出以下代码段的运行时间的增长数量级
    Algs4- 1.4.4参照表1.4.4为TwoSum建立一和类似的表格
    Algs4-1.4.2修改ThreeSum防止两个int值相加可能溢出
  • 原文地址:https://www.cnblogs.com/whalesea/p/10401414.html
Copyright © 2020-2023  润新知