第18天：CSS中的权重

最新推荐文章于 2022-12-01 16:14:10 发布

lefex

最新推荐文章于 2022-12-01 16:14:10 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351467

版权

有时候明明设置了某个CSS属性，但是在浏览器查看的时候却没效果；同时在类选择器和id选择设置某个标签的背景颜色，最终会是哪个选择器起作用？这些问题会涉及到 CSS 的权重问题，你可以把权重看做优先级。其实有的同学可能会疑惑，为什么或设计到权重问题，我举个简单的例子，下面“前端小课，每日一课”的字体颜色是什么：

div p {    color: #8E24AA;}p {    color: #1E88E5;}

<body>    <div>        <p>前端小课，每日一课</p>    </div></body>

再举一个例子，下面“前端小课，每日一课”的字体颜色是什么：

.title {    color: #43A047;}#name2 {    color: #3949AB;}

<body>    <div>        <p id="name" class="title">前端小课，每日一课</p>    </div></body>

上面两个例子就涉及到了 CSS 权重问题，浏览器最终总会要确定如何渲染 HTML 元素。CSS 的权重可以通过 4 个以 - 分开的数字来表示权重值的大小，比如：1-0-10-0，0-1-1-1，比较的时候先从高位开始对比，如果相同则对比下一位的值。举几个例子：

0-0-1-0 大于 0-0-0-1；1-1-0-0 大于 1-0-12-30；

那么这些数值是如何来的呢？

每一类选择器可以给它分配一个特定的值。下图中分别用 g、z、y、x 表示各个选择器表示的值。如果你还不懂选择器，这几篇文章必须好好看：

第14天：在文字前、后插入一个图标
 群里讨论的一个选择器问题（一定要看）
第7天：CSS中的选择器详解

一图胜千言：

g ：直接在元素中使用属性，权重最高，可以看做 1-0-0-0；

z ：id选择器，权重次子，可以看做 0-1-0-0；

y ：类、伪类、属性选择器，权重低，可以看做 0-0-1-0；

x：元素、伪元素选择器，权重最低，可以看做 0-0-0-1；

我们一起学习下网上流行的 3 张宝图：

第一张宝图来自

https://specifishity.com/ 。

CSS specifical，可以翻译成 CSS 权重，图中通过鱼和鲨鱼来表示选择器的权重。

*：通用选择器，权重最低，就是 0，第 1 张图就是此意；

div、li>ul、body：元素选择器，有几个值权重值就是几。li>ul 是两个元素，> 号不会干扰权重计算；第 2、3、4张图能看懂了吧，就是元素选择器，1个元素选择器就是 0-0-1，12个元素选择器就是 0-0-12；

.myClass, [type=chekbox], :only-of-type : 类、属性、伪类选择器。第 5 张图，一个类选择器，权重值表示为 0-1-0；5-15张图能看懂了吧；

#myDiv：id选择器，一条鲨鱼，权重比较高，权重值为 1-0-0；

style：权重值更高，权重值为 1-0-0-0；

!important: 无敌，我是老大，告诉浏览器必须使用我定义的属性；

第二张宝图来自:

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
有了上面知识的基础，理解下面这张图就不难理解了。图中的权重值逐渐递增。不同的的小人代码不同选择器的权重值：

下面是不同选择器之间结合的权重值:

第三张宝图来自:

https://cssspecificity.com/

我看看一看实际的例子来说明 CSS 的权重问题。

实例

1.下面代码中最终会显示什么颜色。

* {    /* 权重值为 0-0-0 */    color: blue;}/* 权重值为 0-0-1 ，元素选择器*/p {    background-color: #eeeeee;    color: purple;}/* 权重值为 0-1-1 = 0-0-1（元素选择器） + 0-1-0（伪类选择器） */p:nth-child(2) {    color: red;}

<body>    <div class="box">        <p>第1个p</p>        <p>第2个p</p>        <p>第3个p</p>    </div></body>

2.多种选择器相结合，权重值该如何计算；

/* 权重值为 0-0-1 （1个元素选择器）*/p {    color: purple;}/* 权重值为 0-0-2 （2个元素选择器）*/div p {    color: bisque;}/* 权重值为 0-1-0（ class 选择器） */.title {    color: blue;}/* 权重值为 1-0-0 （id选择器）*/#name, #name1, #name2, #name3 {    color: green;}/* important 不会增加权重值，但是使用它的时候浏览器会直接使用这个属性值忽略其它属性值，它是老大 */.imp {    color: red !important;}/* 权重值为 1-0-1 = 1-0-0（id选择器）+ 0-0-1（伪元素选择器）*/#name::first-letter {    color: peru;}

<body>    <div class="box">        <p id="name" class="title">第1个p</p>        <p id="name1" class="title">第2个p</p>        <p id="name2" class="title imp">第3个p</p>        <!--  style 的权重中为 1-0-0-0 -->        <p id="name3" class="title" style="color: brown">第4个p</p>    </div></body>