CSS选择器权重计算与优先级

CSS选择器权重计算与优先级选择器有优先级，可以通过权重来计算优先级。一、优先级：等级划分：第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置...

CSS选择器权重计算与优先级

选择器有优先级，可以通过权重来计算优先级。

一、优先级：

等级划分：

第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。

第二优先级：在html中给元素标签加style，即内联样式。

第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ }

第四优先级：由class选择器、属性选择器、伪类选择器定义。如.classname{ }会覆盖div{ }

第五优先级：由元素选择器、伪元素选择器定义。如div{ }覆盖*{ }

第六优先级：通用选择器，如*{ }

css属性+!important>内联样式>ID选择器（#id）>类选择器（.class）=伪类选择器（：hover等）=属性选择器[type]>元素选择器（p等）=伪元素选择器>通用选择器>继承的样式

优先级规则：

同等等级情况下：

1.优先级高的优先。

2.优先级相同时，则采用就近原则，选择后定义的样式。

3.属性后面加 !important 时，绝对优先。

4.继承得来的属性，其优先级最低;

等级不同的情况下，优先级高的优先！！

二、权重：

权重概念：

某一因素或指标相对于某一事物的重要程度，其强调的是因素或指标的相对重要程度，倾向于贡献度或重要性。（权重类比天秤上的砝码）。

权重计算规则

CSS内部是按每条样式的权重值来计算优先级的，各类型的选择器所对应的权重如下：

1.内联样式，如: style="…"，权值为1000。

2.ID选择器，如：#box，权值为0100。

3.class，伪类、属性选择器，如.text，权值为0010。

4.元素选择器、伪元素选择器，如div p，权值为0001。

5.通配符、子选择器、相邻选择器等。如* > +，权值为0000。

6.继承的样式没有权值

算法：权值 = 1000第一等级个数 + 100第二等级个数 + 10第三等级个数 + 1第四等级个数；

举例：

1.内联样式style=”background:blue”权值1000大于id选择器权值100

<title> CSS 选择器权重计算与优先级</title>
    <style>
        #box .text  { /*100*/
            width: 300px;
            height: 300px;
            background: yellow;
        }
        
    </style>
        </head >
        <body >
        <div id="box" >
            <div id="text" style="background:blue;height:100px;">CSS 选择器权重计算与优先级</div>
        </div >
        </body >

2.id选择器背景属性后+!import绝对优先。

<title> CSS 选择器权重计算与优先级</title>
    <style>
        #box .text  { /*100*/
            width: 300px;
            height: 300px;
            background: yellow!important;
        }
        
    </style>
        </head >
        <body >
        <div id="box" >
            <div id="text" style="background:blue;height:100px;">CSS 选择器权重计算与优先级</div>
        </div >
        </body >

3.当class选择器权值110大于id选择器权值100时，优先级高的优先！

<style>
        #text  { /*100*/
            width: 300px;
            height: 300px;
            background: pink;
        }
        .a b c d e f g h i j k { /*110*/
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
        </head >
        <body >
        <div id="box" >
            <div id="text" class="a b c d e f g h i j k">CSS 选择器权重计算与优先级</div>
        </div >
        </body >

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-03 13:51
阅读 ( 440 )
分类：WEB前端开发

CSS选择器权重计算与优先级

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »