css权重机制,CSS权重及其计算

CSS权重及其计算：

每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。

这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。

如果你不了解CSS权重，写CSS代码的过程中使用各种选择器时，你不知道哪个选择器的优先级高，哪个选择器的优先级低，就只能最原始最粗俗的方式是“死记硬背”，但如果理解了CSS权重后，会事半功倍！！！

选择器优先原则：!important > 行间样式 > ID 选择器 >class 选择器｜伪类选择器｜属性选择器 >元素选择器｜伪元素选择器 > 通配符选择器｜子选择器选择器｜相邻兄弟选择器

1.关于CSS权重

是指样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

CSS权重

权重值

例如

!important(加在样式属性值后)

10000

demo{ background-color:red!important; }

行间样式

1000

style=""

100

#content

class、属性、伪类

.demo{}、[span]{}、a:link {color:red;}

标签、伪元素

div{}

通配符(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)

*{}、div > span{}

注意：上图中的数值不是我们日常生活中使用的10进制数值，而是256进制数！！

!important的权重值在256数值中是正无穷大的数，在权重运算过程中，正无穷+1和正无穷相比，如果在数学的角度来说是无法比较的，但在计算机中，始终是正无穷+1>正无穷，这是因为计算机表示的数字是有穷的(即有界)，计算机里面的正无穷表示一个定量值，所以无穷大的数在计算机中运算是能与无无穷大的数比较的，无论是哪种计算机语言的运算，都是如此！

2.CSS权重计算

CSS文件

demo.css

/*这是class选择器*/

.classDiv .classP{

/*权重值：(.classDiv=10)+ (.classP=10) =20 */

background-color: red;

}

这个是id选择器

#idDiv #idP{

/*权重值：(#idDiv=100) + (#idP= 100) = 200 */

background-color: green;

}

/*这是id选择器和class选择器*/

#idDiv .classP{

/*权重值：(#idDiv=100) + (.classP= 10) = 110*/

background-color: pink;

}

/*这个是id选择器和标签选择器*/

#idDiv p{

/*权重值：(#idDiv=100) + (p=1)=110*/

background-color: yellow;

}

HTML文件

cry.html

myWeb

Test

从上图很明显地我们就可以看见权重值运算是根据选择器的权重值运算，权重值大的优先级大于权重值小的，所以输出权重值大的输出结果！

以上没有列出所有情况，但运算的方式大同小异，希望此文章可以帮助到你！!

总结的较为粗略，以上如有误，可在评论区指正！！！

谢谢浏览！

标签：权重,样式,color,idDiv,计算,选择器,CSS

来源： https://blog.csdn.net/weixin_46061477/article/details/106113608

css权重机制,CSS权重及其计算相关推荐

css权重机制,css权重
什么是CSS权重? 当很多的规则被应用到某一个元素上时,com权重决定了哪一条规则会被浏览器应用在元素上. 两个选择器权重值相同,则最后定义的规则被计算到权重中,后面的取代前面的.引入的样式表( @i ...
css权重机制,Css权重计算方式
权重计算公式将选择器按:id选择器,类选择器,标签选择器进行个数统计,根据统计结果进行排序 /* 1,0,1 */ #box1 p { color: red; } /* 0,3,2 */ .div1 ...
css位置布局,CSS定位布局相关
本文档包括CSS的样式定位框模型如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
CSS样式优先级与权重计算方式
CSS一共有四种样式控制方式:行内样式.内嵌样式.链接样式.导入样式(@import).选择器则有标签选择器,类名选择器,ID选择器,和伪标签选择器四种.那么它们的优先级与权重又是计算的呢? 首先上权 ...
[css] 请描述css的权重计算规则
[css] 请描述css的权重计算规则权重值计算选择器案例权重值 !important !important Infinity 内联样式 style="-" 1000 ID ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
在CSS世界的权力——权重
在CSS的世界中也存在着权力即CSS权重 1. 概念 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式 2. 以前的 ...
css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
Vue css样式穿透和权重
普通的html.CSS结构,样式权重为 !important > 行内 > 头部 > 引入.但是在vue里面,我们的文件结构发生改变,不再是html文件而是vue文件,<sty ...
css改变权重,让css的权重变得更友好的小技巧
在这篇文章中,我将通过一些示例来向大家展示一些CSS的小技巧,让你知道如何使用CSS的级联(cascade)能变得更友好,也减少一些不必要的需求,从而也减少权重上遇到的麻烦. 技巧一:样式总是作为特定 ...

css权重机制,CSS权重及其计算

css权重机制,CSS权重及其计算相关推荐

最新文章

热门文章