📢📢📢📣📣📣
哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜
喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我
❤️❤️❤️感谢各位大可爱小可爱！❤️❤️❤️
————————————————如果觉得本文对你有帮助，欢迎点赞，欢迎关注我，如果有补充欢迎评论交流，我将努力创作更多更好的文章。
👩🏫：上一节比较简单，我们学习了css中常用的布局和字体相关的设计属性，这些比较简单，也很好理解，我们就不做过多的赘述了。如果不会的童鞋，可以查看我的上一篇文章。
这节课我们来看看css中层叠和选择器的优先级问题，东西比较重要，下午大家耐心看完。
👩🎓：我们在使用css的时候，肯定会想到这个问题，当⼀个css属性被多次声明的时候，到底要使用哪个属性进行渲染呢？？？
👩🏫：有经验的开发人员，肯定会知道这里肯定会进行一个规定，规定不同的选择器的优先级，这也是我们解决这个问题的一个常用方法。根据优先级的高低进行选择，就会解决这个问题，那么这里css是如何规定优先级的，我们在这来看看。
👩🏫：CSS全称是层叠样式表(Cascading Style Sheets)，这里我们要掌握和理解一下这个层叠的意思，层叠是⼀个基本特征，⼀个css属性被多次声明的时候，会根据优先级或者声明顺序来计算采⽤哪个样式 优先级是怎么计算的呢？
下面是css的优先级，这里介绍了常用的选择器的优先级。数字越大优先级越高。
- 通配符选择器 1： *
- 标签选择器 2：div/span/p/li
- 类选择器 3：class
- id选择器 6：id
- ⾏内样式 5
- !important 6（尽量不要在公⽤代码⾥使⽤）
👨🎓：老师，当我们有相同名称的选择器的时候，这个优先级是怎么确定的呢？
👩🏫：当有同名的选择器的时候，会根据后面的选择器的格式进行渲染，由于程序是从上到下进行执行的，当我们的程序执行到下面的选择器的时候，由于名称相同，这里也会渲染，相当于把这个同名的上一个选择器进行了覆盖（发生了层叠），所以这里的颜色是蓝色的。
👩🎓：我懂了，选择器就是利用了css的层叠的特性实现的对页面样式的优化。
👩🏫：今天的选择器优先级就说到这里了，具体的例子可以见下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
color: red;
}
div {
color: sandybrown;
}
.box {
color: greenyellow;
}
#index {
color: skyblue;
}
</style>
<body>
<div class="box" id="index" style="color: pink;">优先级</div>
</body>
</html>
👩🏫：今天的内容很简单，就讲到这里了
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
