大家好~今天不是很忙可以细细整理题目啦！每天学习一道题，每天进步一点点
今天正式定下过年假期的flag：整理自己面试大厂的面经系列！有成功的 也有失败的，大家可以关注一下哟！就算放假也要抽时间学习哈！
好啦，今天的CSS题目是我之前面试字节的一道题目，当时不知道自己脑子是不是宕机了，看到题目后直接蒙圈了，后续仔细一看实在是不应该！！今天把这个题目分享给大家！
碎碎念结束！！！正题来咯！
题目来咯
页面中有10个逐层嵌套的div元素，最底层的div元素有个名为"div" 的class，对底层div应用以下两条css规则，问最底层的div的颜色？如果规则顺序前后对调呢？请说明原因。
规则：
div>div>div>.....>div.div{/*10个div*/
color:red;
}
.div {
color:blue;
}
看到这，你认为的答案是什么呢？往下滑看看你的答案对不对吧！
看看答案
今天我们先来看看答案吧！我在编译器进行了测试：
代码：
// html
<div>1
<div>2
<div>3
<div>4
<div>5
<div>6
<div>7
<div>8
<div>9
<div class="div">10</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// css
div {
width: 300px;
height: 100px;
}
div>div>div>div>div>div>div>div>div>div.div{
/*10个div*/
color: red;
}
.div {
color: blue;
}
结果如下：
怎么样，你的答案对了吗？
接下来我们来看看思路和知识点吧！
看看思路
大家可能看到这个问题就能敏感的get到它考察的点是css选择器的优先级以及先后顺序的问题，那么我们来看一下这些知识点吧！
css选择器都有哪些？
-
元素选择器(body,div,p,ul,li)
-
类选择器(class="class1 class2")
-
ID选择器(id="")--id是唯一的！
-
全局选择器(*号)
-
组合选择器(.class1 .class2 意思是class1下的class2)
-
后代选择器 (#id1 .class2 ul li 意思是id1下的li)
-
群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
-
继承选择器(div p,)
-
伪类选择器(链接样式,a元素的伪类：link、visited、active、hover。)
-
属性选择符( ^开始、$ 结尾、*包含)
-
子选择器 (div>p)
-
相邻选择器 (h2+p)
CSS选择器的优先级/权重
- 权重：
- !important 高于一切
- 内联选择器（style）：1000
- id选择器：0100
- 类选择器（也包括伪类和属性选择器）：0010
- 元素选择器/伪元素选择器：0001
- 通配符/子选择器/相邻选择器：0000
- 继承的样式没有权重
-
所以我们得到以下的优先级：
!important>style>id>包括伪类和属性选择器> 类型选择器/伪元素选择器>通配符/子选择器/相邻选择器>通配符/子选择器/相邻选择器> 继承的样式
那么我们如何计算平时css的优先级呢？
在这个规则中，排除 !important 和继承的样式 这两个特殊情况
一般css选择器的优先级我们按照4个等级来划分
命中哪个等级哪个等级+1，都不命中均为0；
这里要注意了，当我们判断css语句，需要对每个对应的等级+1时，都不进行进位制，仅仅增加自己对应等级的个数，比较过程中，高位的值大的则选择器高，相等再对低位进行比较，不是单纯的比较和。
所以得到计算方法：
1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
基于这些知识点，我们再来分析上面的代码
【.div 】的权重等级分别是 0 0 1 0
【div>div>div>div>div>div>div>div>div>div.div】的权重等级是 0 0 1 10
所以，显示的是红色，就算把规则进行前后位置交换也是显示的红色
.div {
color: blue;
}
div>div>div>div>div>div>div>div>div>div>div{
color: red;
}
再来看看权重：
【.div】 0 0 1 0
【div>div>div>div>div>div>div>div>div>div>div】 0 0 0 10
所以展示为蓝色，和位置无关。
好啦，今天的知识点比较绕，还是建议大家自己运行一下代码哟！有问题欢迎和我交流~
欢迎关注我的公众号，一起进步！
