html中多个class的优先级

最新推荐文章于 2021-06-20 11:50:17 发布

原创最新推荐文章于 2021-06-20 11:50:17 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析CSS样式优先级，通过实例说明决定元素颜色的规则，并探讨类名组合的权重。了解如何在HTML中利用`.a`, `.b`, `.ab`, `.ba`来理解优先级的实际应用。

css样式的优先级是在加载css文件的时候就确定下来的，而不是由后来html里class属性位置前后决定的。

例1

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .a {
                color: red;
            }


            .b {
                color: blue;
            }


        </style>
    </head>
    <body>
        <!--red-->
        <div class="a">Text</div> 
        <!--blue-->
        <div class="b">Text</div>  
        <!--blue-->
        <div class="a b">Text</div>
        <!--blue-->
        <div class="b a">Text</div>
    </body>
</html>

例2

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .a {
                color: red;
            }


            .b {
                color: blue;
            }

            .a.b {
                color: orange;
            }


            .b.a {
                color: green;
            }
        </style>
    </head>
    <body>
        <!--red-->
        <div class="a">Text</div> 
        <!--blue-->
        <div class="b">Text</div>  
        <!--green-->
        <div class="a b">Text</div>
        <!--green-->
        <div class="b a">Text</div>
    </body>
</html>