CSS选择器权重计算规则

1.第一等：代表内嵌样式；如：style=" ",权重值为10000.

2.第二等：代表ID选择器；如：#content,权重值为0100.

3.第三等：代表类，伪类和属性选择器；如：.content,权重值为0010.

4.第四等：代表元素和伪元素选择器；如：div p,权重值为0001.

5.第五等：代表通配符，子元素选择器和相邻兄弟选择器等；如：*、>、+，权重值为0000.

6.继承的样式没有权重值.

7.!important;

　　!important的作用是提升优先级，换句话说，加了这句的样式的优先级是最高的（比内嵌的优先级还高）。

　　

时间： 2024-12-15 11:32:15

CSS选择器权重计算规则的相关文章

CSS 选择器权重计算规则

CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. 选择器的分类 正式计算选择器权重之前,先来看选择器是如何被分类的. 因为 CSS 选择器众多,在计算时,这些选择器被归为了三大类,按其权重由大到小依次为: ID 选择器:比如 #dialog 元素类型选择器(type selector)和伪选择器(pseudo selector):比如 h1,::

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s

CSS选择器权重计算

权重计算规则 内联样式,如: style=" ",权值为1000. ID选择器,如:#content,权值为0100. 类,伪类和属性选择器,如.content,权值为0010. 类型选择器和伪元素选择器,如div p,权值为0001. 通配符.子选择器.相邻选择器等的.如*.>.+,权值为0000. 继承的样式没有权值. 权值越大,权重越高 !important !important 用来提升优先级,加了这句的样式的优先级是最高的. 原文地址:https://www.cnblo

css选择器权重、样式继承、默认样式

学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同css文件:写在后面的起作用 不同css文件:后导入的起作用 但今天遇到一个问题 <body> <div style="color: red"> <span>123</span> </div> </body> 却是这样的

CSS选择器的权重计算规则

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先. 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器

css选择器权重值计算规则

一.样式类型 1.行间 <h1 style="font-size:12px;color:#000;">我的行间CSS样式.</h1> 2.内联 <style type="text/css"> h1{font-size:12px; color:#000; } </style> 3.外部 <link rel="stylesheet" href="css/style.css"&g

CSS选择器的权重与优先规则？

我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明. 一.样式类型1.行间 <h1 style="font-size:12px;col

CSS选择器的权重计算

什么是CSS选择器权重? 即使在不太复杂的样式表中,要寻找同一元素可能有两个或者更多规则,当同一元素被多个不同来源的样式规则设置了样式后,如何处理样式规则的冲突,显示元素最后的样式,用到的计算规则就是CSS选择器的权重规则. 根据选择器的特殊性决定规则的次序.具有更特殊选择器的规则优先于具有一般选择器的规则.如果两个规则的特殊性相同,那么后定义的规则优先. 特殊性 为了计算规则的特殊性,给每种选择器都分配一个数字值.然后,将规则的每个选择器的值加在一起,计算出规则的特殊性.特殊性的计算不是以10

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,