CSS层叠性和选择器权重计算

最新推荐文章于 2022-08-08 23:00:49 发布

小豪boy

最新推荐文章于 2022-08-08 23:00:49 发布

阅读量151

点赞数

分类专栏： CSS3学习笔记

本文链接：https://blog.csdn.net/qq_34771938/article/details/119921368

版权

css html

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.层叠性

CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质。

层叠性：多个选择器可以同时作用于同一个标签，效果叠加。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        p {
            color: red;
            width: 300px;
        }

        .spec {
            background-color: sandybrown;
        }

        #para {
            font-style: italic;
        }
    </style>
</head>

<body>
    <!-- 层叠性 -->
    <!-- 层叠性：多个选择器可以同时作用于同一个标签，效果叠加 -->
    <p class="spec" id="para">
        你好
    </p>
</body>

</html>

层叠性的冲突处理

CSS有严密的处理冲突的规则，id权重>class权重>标签权重。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        p {
            color: red;
        }

        #para {
            color: greenyellow;
        }

        .spec {
            color: sandybrown;
        }
    </style>
</head>

<body>
    <!-- 层叠性 -->
    <!-- CSS有严密的处理冲突的规则,id权重>class权重>标签权重 -->
    <p class="spec" id="para">
        你好
    </p>
</body>

</html>

2.复杂选择器权重计算

复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式,计算权重，首先比较id的个数大的生效，以此类推，若最后权重一样，则比较样式书写的前后顺序，靠后的生效。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        /* 权重计算 */
        /* (2,1,2) */
        #para1 div#para2 .spec3 p {
            color: greenyellow;
        }

        /* (1,2,2) */
        div.spec1 .spec2 #para3 p {
            color: red;
        }

        /* (2,0,1) */
        #para1 #para3 p {
            color: yellow;
        }
    </style>
</head>

<body>
    <!-- 复杂选择器权重计算 -->
    <div id="para1" class="spec1">
        <div id="para2" class="spec2">
            <div id="para3" class="spec3">
                <p>你好！</p>
            </div>
        </div>
    </div>
</body>

</html>

!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        /* 权重计算 */
        /* (2,1,2) */
        #para1 div#para2 .spec3 p {
            color: greenyellow;
        }

        /* (1,2,2) */
        div.spec1 .spec2 #para3 p {
            color: red !important;
        }

        /* (2,0,1) */
        #para1 #para3 p {
            color: yellow;
        }
    </style>
</head>

<body>
    <!-- 复杂选择器权重计算 -->
    <!-- !important提升权重 -->
    <div id="para1" class="spec1">
        <div id="para2" class="spec2">
            <div id="para3" class="spec3">
                <p>你好！</p>
            </div>
        </div>
    </div>
</body>

</html>

小豪boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠性和选择器权重计算

1.层叠性CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质。层叠性：多个选择器可以同时作用于同一个标签，效果叠加。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First HTML Web</title> <style> p { ...
复制链接

扫一扫