css中的权重问题
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>
问题即将来临css 属性选择器
/*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 *//* ⼤于上边⼀⾏的权重，所以显⽰黄⾊的 */
<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>
但是，⼜是⼀个新问题。
<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>
这个就涉及另⼀个知识点，⼦元素从⽗元素继承⽽来的css样式权重为0。
总结
将权重想象成⼀个4位数（0000），初始都为0
⾏内样式为（1000）
id选择器（0100）
类选择器、伪类选择器、属性选择器、结构为类选择器（0010）
标签选择器、伪元素选择器（0001）
!important权重最⾼
从左往右⽐较，相等则继续，不等则停⽌，⼤的权重⼤
从⽗级元素继承的选择器的权重为0。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论