0基础和小Q学前端----（5）css中层叠与选择器的优先级

最新推荐文章于 2024-11-04 17:05:06 发布

智达教育‍

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量532

点赞数 2

分类专栏：前端进阶文章标签： 1024程序员节前端 css css3 开发语言

本文链接：https://blog.csdn.net/qq_29235677/article/details/127486393

版权

前端进阶专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文讲解了CSS中选择器的优先级规则，包括通配符、标签、类、ID和行内样式的优先级顺序。讨论了当同一属性被多次声明时，如何根据优先级决定采用哪个样式。还提到了层叠的概念，即样式根据声明顺序发生覆盖。通过示例代码展示了不同选择器在同一元素上的应用效果，帮助读者理解CSS的层叠和优先级机制。

摘要由CSDN通过智能技术生成

📢📢📢📣📣📣
哈喽！大家好，我是「奇点」，江湖人称 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>