欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 11:04:42
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级。一:优先级等级划分:第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元素样式,它拥有最高优先级。第二优先级:在html中给元素标签加style,即内联样式。第三优先级:由id选择器来定义。例如,#id{ }会覆盖.classname{ }第四优先级:由class选择器、属性选择器、伪类选择器定义。如.classname{ }会覆盖div{ }第五优先级...

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 >

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

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 >

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

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 >

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

本文地址:https://blog.csdn.net/m0_51734506/article/details/111145406

相关标签: css