首页技术css选择器权重,css选择器类型

css选择器权重,css选择器类型

编程之家2026-05-29676次浏览

今天给各位分享css选择器权重的知识,其中也会对css选择器类型进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

css选择器权重,css选择器类型

css3复合选择器权重怎么求是否是具体值

css的权重等级可以分为5个级别:

1.第一级别:内联样式,详细大家都知道什么是内联样式,既是在标签添加style属性<div style=""></div>,这种方式权重值最高,权重值为1000,但是开发过程中比较少用到这种,因为现在推荐的方式都是将css,js,html写成单独文件。这样子看起来会比较整洁以及方便管理。

2.第二级别:ID选择器,id选择器就是使用"#"开头选择,大家应该都明白,这种选择方式的权重值为0100。

3.第三级别:class选择器,class选择器就是使用"."开头的选择器,这种选择方式的权重值为0010.

4.第四级别:标签选择器以及伪类选择器,就是直接使用标签或者伪类选择器,这种两种选择方式的权重值都为0001.

5.这里提醒一下通用选择器(*),子选择器(>)和相邻同胞选择器()这三种是没有权重的,也就是权重值为0000,虽然没有权重但是比继承样式权重高;这里值得提醒一下,并非所有的伪类选择器的权重都为i,总一些领导家的孩子,像a:link,a:visited伪类选择器,他们的权重比第三级别class选择器的权重还高。

css选择器权重,css选择器类型

这里要提醒一下,这里的权重并不是10进制,不过在比比较的时候可以当作十进制去叠加。

CSS中的权重

元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式作用在元素上就会产生优先级权重的问题。

零、属性后面使用!important,权重最大,会覆盖页面内任何位置定义的元素样式。

一、内联样式,权重为1000【写在HTML元素的style属性中】

二、ID选择器,权重为0100【非内联样式】

三、类、伪类、属性选择器,权重为0010【非内联样式】

css选择器权重,css选择器类型

四、标签、伪元素选择器,权重为0001【非内联样式】

五、通配符、子选择器、相邻选择器等,权重为0000【非内联样式】

六、继承的样式没有权重

注意

没有权重和权重为0,权重为0的权重比没有权重的大,优先级高

1、选择器中 ID选择器的权重【a=数量*权重】

2、选择器中类、伪类、属性选择器的权重【b=数量*权重】

3、选择器中标签、伪元素选择器的权重【c=数量*权重】

4、最终的权重w= a+ b+ c

运行截图

width:宽度【块级元素的会继承父类的内容宽度contentwidth,】

color:字体的颜色

css定义的权重 面试时怎么回答

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

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?

在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。

那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法:

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为100。

第三等:代表类,伪类和属性选择器,如.content,权值为10。

第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113

下面是一些计算示例:

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。

如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。如果这能解决问题,就说明样式表中其他地方很可能有更特殊的规则,它覆盖了你的规则。如果是这种情况,你可能需要检查代码,解决特殊性冲突,让代码尽可能简洁。

关于css选择器权重到此分享完毕,希望能帮助到您。

完整php网站源码(在线爬取网页源码)网站源码编辑器,网页版word编辑器