css中的权重问题

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

Jonny Jiang-zh

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

阅读量473

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/weixin_45571140/article/details/108243166

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css中的权重问题

问题

是否css的加载顺序就一定是：行内 > 内部 > 外部 / id选择器 > class选择器？？？

本章主要分析css中的权重问题。在我们学习时，经常听说：**样式有三种书写方式，第一种是行内样式，第一种是内部样式，最后一种是外部样式。在我们引入样式的时候，毫无疑问行内样式优先级是最高的，内部样式理所当然会覆盖外部样式。id选择器也会大于class选择器。**当时没有多深究，就信了，在以后一段时间里，就使用这种规则去写代码，是ok的。直到有一次看书时联想到了这个问题，就开始重新测试……

首先，内部样式会覆盖外部样式。

/*test.css*/
#div { color: red; }

<link rel="stylesheet" href="test.css">
<style>
  #div {
    color: yellow;
  }
</style>

<div id='div'>
  <p id='p'>我是测试的</p>
</div>

然后，id选择器 > class选择器

<style>
  #div { color: yellow; }
  .div { color: red; }
</style>

<div id='div' class='div'>
  <p id='p'>我是测试的</p>
</div>

问题即将来临

/*test.css*/
#div { color: red; }

<style>
  #div {
    color: yellow;
  }
</style>
<link rel="stylesheet" href="test.css">    <!-- 在后边引入 -->

<div id="div">
  <p id="p">我是测试的</p>
</div>

不是说好的内部优先级高于外部？按照加载的顺序，后加载的就覆盖之前的，这还可以接受。

但是

<style>
  #div p { color: red; }
  #p { color: yellow; }
</style>

<div id="div" class="div">
  <p id="p">这里是测试文本</p>
</div>

不是说id选择器优先级应该要高于class和tag标签选择器，所以#p的优先级是最高的才是……由此进入主要内容——css权重。

概述

css最终显示的样式是由权重决定的，每种选择器都有一个权重值，不管谁先加载或后加载，谁的权重值最大，就显示谁，如果相同，则显示后声明。从0开始，行内样式+1000，id+100，属性选择器/class或者伪类（包括结构伪类选择器）+10，元素名或者伪元素+1。并且做加法时不进位。例如：

#div .test p {}  /* 0111 */
body#container div {}   /* 0102 */
/*相加不进位*/
.p1 .p2 .p3 .p4 .p5 .p6 .p7 .p8 .p9 .p10 .p11 div { color: red; }    /* 0,0,11,1 */
#p1 div { color: yellow; }    /* 0,1,0,1 */  /* 大于上边一行的权重，所以显示黄色的 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p1 .p2 .p3 .p4 .p5 .p6 .p7 .p8 .p9 .p10 .p11 span { color: red; }
        #div span { 
            color: yellow; 
		}
    </style>
</head>
<body>
    <div id="div">
        <p class="p1">
            <p class="p2">
                <p class="p3">
                    <p class="p4">
                        <p class="p5">
                            <p class="p6">
                                <p class="p7">
                                    <p class="p8">
                                        <p class="p9">
                                            <p class="p10">
                                                <p class="p11">
                                                    <span>我是测试的</span>
                                                </p>
                                            </p>
                                        </p>
                                    </p>
                                </p>
                            </p>
                        </p>
                    </p>
                </p>
            </p>
        </p>
    </div>
</body>
</html>

在这里插入图片描述

但是，又是一个新问题。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.a::after {
			content: "哈哈哈";
			color: #008000;
		}
		#al .a {
			color: red;
		}
		span {
			color: #00FFFF;
		}
	</style>
</head>
<body>
	<div id="al">
		<div class="a"> 
			<!-- 在这里span继承了父级的样式，权重为0，但是它使用标签选择器设置了自身样式，权重为1，故，颜色不一样，上面的伪元素选择器也是。-->
			<span class="b">哈哈哈哈</span>
			啊啊啊
		</div>
	</div>
</body>
</html>