CSS选择器的权重问题

来源：互联网发布：深圳小拨网络 skype 编辑：程序博客网时间：2024/05/01 08:41

CSS是可以用来添加样式的

有内部样式（内部样式就是在html文件中通过<style></style>标签来添加样式）和

外联样式（通过<link>标签将外部的样式css文件引入到html文件中）

还有行间样式，即在元素标签中通过style=" "添加样式；

而在各个不同的样式添加中，优先级就决定了最后真正能呈现在页面的效果；

而添加样式是通过CSS选择器选择指定的标签进行添加的，而选择器也不是唯一的：

1、id选择器（唯一的与标签只能是一对一）

2、class选择器（与标签可以一对多或者多对一）

3、标签选择器（标签名称）

4、通配符选择器（“*”一般用来初始化所有标签）

此时优先级是：行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器

补充：当绝对需要确定一个元素具有特定的属性CSS时，可以在样式后添加------------！important；

例如

<!DOCTYPE html><html><head><meta charset="utf-8"><title>权重问题</title><style type="text/css">.blue{color: blue;}</style></head><body><p style="color: red" class="blue">行间红色，class选择器是蓝色</p></body></html>

因为行间样式的优先级更高，所以字应该是红色

但是如果在class选择器的颜色设置后面添加！important；

color:blue !important;

文字变成了蓝色

所以优先级的顺序应该是：

！important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器

对应有个权重的问题，反正最后有个结果如下

权重值

！important Infinity

行间样式 1000

id选择器 100

class | 属性 | 伪类 10

标签 | 伪元素 1

通配符 0

**注意**：只要是写在同一排的选择器，将其权重相加，即可求出谁的优先级更高；

总结：

以前在引用别人的网页的时候，想要修改一下样式，但是不管怎么添加样式都得不到想要的效果，现在明白了；

因为对于同一个标签，可以有多种方式来选中，所以可能有的时候就是权重的问题，导致代码难以修改；

阅读全文

0 0