CSS选择器总结

最新推荐文章于 2024-06-20 20:15:37 发布

xicc1112

最新推荐文章于 2024-06-20 20:15:37 发布

阅读量277

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/xicc1112/article/details/104864925

版权

CSS/CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一些简单的问题

CSS的全称是什么？

答：Cascading Style Sheet（层叠样式表）

样式表的组成

答：样式表由一个个的规则组成。而规则由选择器和声明块组成。声明块则由CSS属性和CSS属性值组成，由下图所示。
在这里插入图片描述

浏览器读取编译CSS的顺序

答：从右往左。因为如果从左往右，浏览器不可能只匹配一次就成功匹配元素，必须一层层往里面挖。而从右往左，则可能一次就能匹配，左边的无需再渲染。从算法的复杂度和性能来看浏览器读取编译CSS的顺序是从右往左的。

选择器的思维导图

在这里插入图片描述

CSS声明的优先级

在这里插入图片描述

代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=deice-width, initial-scale=1.0">
    <title>canvasTest</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            color: yellow;
        }

        /* 非重要声明 */
        #test {
            /* ID选择器，特殊性：0,1,0,0 */
            background-color: red;
        }

        .yellow {
            /* 类选择器，特殊性：0,0,1,0 */
            background-color: yellow;
        }

        /* 重要声明 */
        div[id].yellow {
            /* 标签选择器和属性选择器和类选择器，特殊性：0,0,2,1 */
            background-color: darkgoldenrod !important;
        }

        div[id] {
            /* 标签选择器和属性选择器，特殊性：0,0,1,1 */
            background-color: green !important;
        }
    </style>
</head>
<body>
    <!-- 内联声明的特殊性：1,0,0,0 -->
    <div id="test" class="yellow" style="background-color: black;color: red;">
        <div>继承没有特殊性</div>
    </div>
</body>
</html>

由代码可知此处起冲突的是div的背景颜色。
开始按照来源排序，该代码中来源有创作人员的重要声明及正常声明。第一步判断重要声明胜出。
两个重要声明中标签选择器和属性选择器和类选择器的特殊性为0,0,2,1，比标签选择器和属性选择器的特殊性：0,0,1,1占优。由此得最终div的背景颜色为 darkgoldenrod