CSS选择器的权重计算

最新推荐文章于 2023-10-07 13:03:51 发布

thedevilisme888

最新推荐文章于 2023-10-07 13:03:51 发布

阅读量654

点赞数 1

文章标签： html html5 css

本文链接：https://blog.csdn.net/thedevilisme888/article/details/115694203

版权

本文详细介绍了CSS的层叠性和冲突处理，重点讨论了CSS选择器的权重计算规则，包括id选择器、类选择器、元素选择器等，并通过多个实例展示了权重计算的过程，帮助理解不同选择器在样式冲突时的优先级决定因素。

摘要由CSDN通过智能技术生成

1.CSS层叠性

CSS的全名是"层叠式样式表"。所谓的层叠性，就是指多个选择器可以同时作用于同一个标签，样式效果叠加的特性。比如下面这段代码：
css：

p{
   
    color: red;
}
.spec{
   
    font-style: italic;
}
#para{
   
    text-decoration: underline;
}

html：

<p id="para" class="spec">段落</p>

这个p标签，上面有id属性是para，class属性是spec，
现在分别用标签选择器、class选择器、id选择器给它添加样式，
用标签选择器p给它添加的样式是字体颜色是红色，
用class选择器.spec给它添加的样式是字体倾斜，
用id选择器#para给它添加的样式是文字下面加下划线。

你会发现这三个选择器的样式，都会同时叠加作用到这个p标签上，相当于一层一层叠加上去的。
这就是CSS的层叠性。

2. 层叠性的冲突处理

如果多个选择器定义的属性样式有冲突，CSS有严密的处理冲突的规则。

比如还是同一个p标签，它有的id是para，它的class是spec，分别用标签选择器、id选择器、class选择器给这个p标签添加相同的样式，如下面的代码：

p{
   
    color: red;
}
.spec{
   
    color: green;
}
#para{
   
   color: bule;
}

这三种选择器选择的都是这同一个p标签，但是这三种选择器添加的字体颜色分别是红色、绿色、蓝色。

那么此时这个p标签的文字到底是什么颜色呢？这就冲突了。
从而引出权重问题。

在讲解计算规则之前，先来大概再了解下具体的CSS选择器有哪些，才可以更方便的知道权重如何计算。

3、CSS选择器

id选择器（#id）

使用ID选择器之前需要先在html文档中的元素添加id名称，这样在样式选择器中才能找到相对应的元素。
id选择器具有唯一性。
我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id)。

类选择器（.className）

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类。

元素选择器(E)

元素选择器，是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,div等等。

群组选择器（selector1,selector2,…,selectorN）

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，如上面所示selector1,selector2,…,selectorN。这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器。

通用兄弟选择器（Ｅ〜Ｆ）

通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。

相邻兄弟元素选择器(E + F)

P+b : 同一个父元素下p标签后面的第一个兄弟元素b。

子元素选择器(E>F)

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（ＥＦ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。

后代选择器（ＥＦ）

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中

通配符选择器（＊）

通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素。

伪类选择器

比如:link：未访问的链接

伪元素选择器

伪元素可用于定位文档中包含的文本，为与伪类进行区分，伪元素使用双冒号 :: 定义，但单冒号 : 也能被识别。
列举几个常用的：
::before 与 ::after ：使用 contnet 属性生成额外的内容并插入在标记中

属性选择器

将元素属性用于选择器中，从而获取指定元素属性或者值得元素；
语法：

[属性] ：匹配 “指定属性” 的 “所有” 元素；
元素[属性] ：匹配 “指定属性” 的 “指定” 元素；
input[type] : 获取具备type属性的input；
input[id] : 获取具备id属性的input；
元素[属性][属性] ：匹配 “多个指定属性” 的 “指定” 元素；
元素[属性=“值”] ：匹配 “指定属性等于值” 的 “指定” 元素；
元素[属性~=“值”] ：匹配 “指定属性中包含这个值(独立的单词)” 的 “指定” 元素；
元素[属性^=“值”] ：匹配 “指定属性以指定值开始” 的 “指定” 元素；
元素[属性*=“值”] ：匹配 “指定属性包含值(可以是非独立的单词)” 的 “指定” 元素；
元素[属性$=“值”] ：匹配 “指定属性以指定值结束” 的 “指定” 元素；
元素[属性!=“值”] ：匹配 “指定属性不等于值” 的 “指定” 元素；

4.权重计算规则

根据样式所在位置，对元素的影响也有关系：内联样式（标签内style形式） > style标签 > link标签。

另外一点需要注意的是 !improtant ,凡是属性值后加上了 !important ，那么它的值不会被其他值替换。

权重计算规则：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

权重计算第一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible

最低0.47元/天解锁文章

thedevilisme888

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器的权重计算

id>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式。在讲解计算规则之前，先来大概再了解下具体的CSS选择器有哪些，才可以更方便的知道权重如何计算。1、CSS选择器id选择器（#id）使用ID选择器之前需要先在html文档中的元素添加id名称，这样在样式选择器中才能找到相对应的元素。id选择器具有唯一性。我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id)。类选择器（.className
复制链接

扫一扫