css样式优先级示例

最新推荐文章于 2023-03-26 00:02:30 发布

伏见伊奈里

最新推荐文章于 2023-03-26 00:02:30 发布

阅读量503

点赞数 1

分类专栏：前端面试

本文链接：https://blog.csdn.net/qq_35313994/article/details/51674345

版权

前端面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.一个DIV中既有class又有id

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box1{color:red;}
            .box1{color:blue;}
            .box2{color:blue;}
            #box2{color:red;}
        </style>
    </head>
    <body>
        <div  class="box1" id="box1">
            Hello
        </div>
        
        <div  class="box2" id="box2">
            Word
        </div>
        <!--说明id作用力大于class，且与位置无关-->
    </body>
</html>

2.一个div中有多个class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .red {color:red;}
            .blue{color:blue;}
        </style>
    </head>
    <body>
        <div  class="red blue" >
            Hello
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .blue{color:blue;}
            .red {color:red;}
        </style>
    </head>
    <body>
        <div  class="red blue" >
            Hello
        </div>
    </body>
    <!--结果是：第一个是蓝色，第二个是红色。
    说明：有两个类，会按照div引用的class中，在css中最后一个定义为准-->
</html>

3.伪类选择器与class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            /*下边执行顺序不影响结果*/
            .red {color:red;}
            .red>div:first-child{color:pink;}/*作用域第1*/
            .red>div{color:blue;}/*作用域第2*/
            .green {color:green;}/*作用域第3*/
        </style>
    </head>
    <body>
        <div  class="red" >
            <div class="green">
                Hello<!--颜色为pink-->
            </div>
        </div>
    </body>
</html>

伏见伊奈里

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式优先级示例

1.一个DIV中既有class又有idDOCTYPE html>html> head> meta charset="utf-8" /> style type="text/css"> #box1{color:red;} .box1{color:blue;} .box2{col
复制链接

扫一扫