CSS 权重问题

最新推荐文章于 2022-09-18 17:10:00 发布

xj-L

最新推荐文章于 2022-09-18 17:10:00 发布

阅读量813

点赞数

分类专栏： CSS 随记文章标签： CSS权重 CSS选择器

本文链接：https://blog.csdn.net/LL18781132750/article/details/81870437

版权

随记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

权重等级

行内内嵌样式

行内样式包含在你的 html 标签中对你的元素产生直接作用，权重最大，但是不能声明伪类样式

<div style="position:absolute;color:red;">test</div>

ID 选择器

ID 一般用来作为元素的唯一标识，权重第二

类选择器、属性选择器、伪类选择器

属性选择器：针对标签中的属性的选择器（这个形容有点书面，具体自己理解）

/* 设置 input 标签中 title 为 test 的标签字体颜色 */
input[title="test"] {
    color:#39f;
}

伪类选择器：link、visited、hover、active（注意：对链接设置样式，必须注意顺序）

.tes:hover{
    color: #39f;
}

元素选择器，伪元素选择器

伪元素选择器：

/* 伪元素选择器 */
::after
::before
::first-letter
::first-line
::selecton

具体权重

选择器	权重
行内元素样式	1000
ID 选择器	100
类、伪类、属性选择器	10
元素、伪元素选择器	1
通配符 *	0

下面的栗子是转自《你应该知道的一些事情——CSS权重》，可以自行测试一下

*{}                         ====》0
li{}                        ====》1(一个元素)
li:first-line{}             ====》2(一个元素，一个伪元素)
ul li {}                    ====》2（两个元素）
ul ol+li{}                  ====》3（三个元素）
h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素）
ul ol li.red{}              ====》13（一个类，三个元素）
li.red.level{}              ====》21（两个类，一个元素）
style=""                    ====》1000(一个行内样式)
p {}                        ====》1（一个元素）
div p {}                    ====》2（两个元素）
.sith {}                    ====》10（一个类）
div p.sith{}                ====》12（一个类，两个元素）
#sith{}                     ====》100（一个ID选择器）
body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

权重计算规则

相同权重，依据最后一个选择器为准
不同权重，权重最高的选择器为准
就近法则，与元素“挨得近”的规则生效

/* CSS 文件中 */
.test {
    color: #ccc;
}

/* HTML 文件中 */
<style>
    .test {
        color: #39f;
    }
</style>

/* 此时样式依据 HTML 文件中的选择器计算，元素字体颜色为 #39f */