html中多个class的优先级

最新推荐文章于 2024-06-12 22:32:31 发布

wiscourper_

最新推荐文章于 2024-06-12 22:32:31 发布

阅读量985

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/lanwangxia/article/details/113332889

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

wiscourper_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html中多个class的优先级

css样式的优先级是在加载css文件的时候就确定下来的，而不是由后来html里class属性位置前后决定的。例1<!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
复制链接

扫一扫

专栏目录