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>
这个就涉及另一个知识点，子元素从父元素继承而来的css样式权重为0。
总结
- 将权重想象成一个4位数（0000），初始都为0
- 行内样式为（1000）
- id选择器（0100）
- 类选择器、伪类选择器、属性选择器、结构为类选择器（0010）
- 标签选择器、伪元素选择器（0001）
- !important权重最高
- 从左往右比较，相等则继续，不等则停止，大的权重大
- 从父级元素继承的选择器的权重为0。