12.复用选择器

最新推荐文章于 2021-06-28 17:24:16 发布

Keeling1720

最新推荐文章于 2021-06-28 17:24:16 发布

阅读量142

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113809778

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        /*将class为red的元素设置为红色字体*/
        .red{
            color: red;
        }

        /*将class为red的div元素设置为30px*/
        /**
            交集选择器：
                作用：选中同时符合多个条件的元素
                语法：选择器1选择器2选择器3选择器n{}
                注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
         */
        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue;
        }

        /**
            选择器分组：
                作用：同时选择多个选择器对应的元素
                语法：选择器1，选择器2，选择器n{}

                我们甚至可以这么用：
                //id是b1的 或 class是p1的 或 元素是h1的 或 元素是span的 或 元素是div且class是red的
                #b1,.p1,h1,span,div.red{}
         */
        h1, span{
            color: green;
        }
    </style>
</head>
<body>
    <!--交集选择器（满足全部条件）-->
    <div class="red">我是div</div>
    <p class="red">我是p元素</p>
    <p class="a b c">我同时满足class a、b、c</p>

    <!--选择器分组（满足其中一个条件）-->
    <h1>我是标题</h1>
    <span>我是span</span>
</body>
</html>