html选择器优先级如何计算,CSS选择器权重计算与优先级

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

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

#box .text { /*100*/

width: 300px;

height: 300px;

background: yellow;

}

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

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

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

#box .text { /*100*/

width: 300px;

height: 300px;

background: yellow!important;

}

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

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

#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;

}

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

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

html选择器优先级如何计算,CSS选择器权重计算与优先级相关推荐

CSS选择器权重计算与优先级
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级. 一:优先级等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元 ...
[css] 请描述css的权重计算规则
[css] 请描述css的权重计算规则权重值计算选择器案例权重值 !important !important Infinity 内联样式 style="-" 1000 ID ...
css选择器包含哪些,css选择器有哪些
在css中,css的选择器有很多种,其中就包括标签选择器.id选择器.类选择器.继承选择器.伪类选择器.全局选择器等八种选择器. 本文操作环境:Windows7系统.css3版,Dell G3电脑. ...
css选择器优先级及,CSS选择器优先级（转）
1. 引言上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...
html连在一起的选择器,请问关于css选择器的问题：两个类选择器连在一起是什么意思？...
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器包括单独的选择和分组选择. 如:h1 { color:red;} 单独选择器定义h1标签的文字颜色 h1, h2, h3, h4 ...
html中css选择器的分类,CSS选择器分类
CSS选择器分类标签(空格分隔): CSS 选择器标签选择器标签选择器:html代码中的标签.例如:html.form.span 为p标签设置12px字号,行间距设置1.6em的样式: p{ f ...
css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录文章目录系列文章目录前言一.css三大特性 1.继承性 2.层叠性 3.优先级二.权重计算 1.引入库 2.读入数据三.BFC(块级格式化上下文) 1.引入库 2.读入数据总 ...
关于CSS选择器的权重计算
CSS选择器的权重计算公式大概如下: 内联样式表的权值最高为 1000: ID 选择器的权值为 100 Class 类选择器.属性选择器.伪类的权值为 10 HTML 元素选择器.伪元素的权值为 1 ...
CSS选择器优先级 12.28
时隔2个星期,失踪人口回归了!从28号开始,要重新更新博客了!上个星期太沉迷于scss,做了很多很有意思的动画,之后也会考虑上传到博客上的.那么首先我们回到最最最爱的css,这个面试题其实蛮经典的,尽 ...
第二课：css选择器选择器优先级及css3新增选择器（系统解析）
一.复习html4.0时代的选择器 1.css选择器 id选择器 #header class选择器 .btn 标签选择器 p 复合选择器 div.container 所有后代选择器 ul li 多个选 ...

html选择器优先级如何计算,CSS选择器权重计算与优先级

html选择器优先级如何计算,CSS选择器权重计算与优先级相关推荐

最新文章

热门文章