4.10 并集选择器

作者: 一Left一 | 来源:发表于2017-12-04 17:19 被阅读7次

    1、 给所有选择器选中的标签设置属性

    2、连接符:,

    3、格式:

    选择器1,选择器2{
        属性: 值;
    }
    

    4、注意点:
    并集选择器必须使用,来连接
    选择器可以使用标签名称/id名称/class名称

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*
            要求设置p,h1,li,a 的字体颜色为红色
            */
            /*p{*/
                /*color: red;*/
            /*}*/
            /*h1{*/
                /*color: red;*/
            /*}*/
            /*li{*/
                /*color: red;*/
            /*}*/
            /*a{*/
                /*color: red;*/
            /*}*/
            p,h1,li,a{
                color: red;
            }
        /*
        并集选择器/分组选择器: 可以被多个选择器中的一个选中,就可以应用相关的样式
        符号: ,
        格式: 选择器1,选择器2,选择器3,...
        用法:
        选择器1,选择器2,选择器3,...{
        规则;
        ...
        }
        使用并集选择器,设置的属性是一样的
    
        */
        </style>
    </head>
    <body>
    <!--快速创建标签
    +: 创建并列的标签
    p+h1:
    <p></p>
    <h1></h1>
    -->
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h1>我是一个标题</h1>
    <h1>我是一个标题</h1>
    <ul>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
    </ul>
    <a href="#">我是一个超链接</a>
    </body>
    
    图片.png
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .choose,.coll{
                color: yellowgreen;
            }
            .choose.coll{
                color: blue;
            }
    
        </style>
    </head>
    <body>
    
    <ul>
        <li>
            <p>我是一个段落</p>
            <p class="choose">我是一个段落</p>
            <p>我是一个段落</p>
            <h3 class="choose coll">我是一个标题</h3>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
        </li>
        <li>
            <p  class="choose coll">我是一个段落</p>
            <p>我是一个段落</p>
            <p>我是一个段落</p>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
        </li>
        <li>
            <p>我是一个段落</p>
            <p class="coll">我是一个段落</p>
            <p>我是一个段落</p>
            <h3 class="choose coll">我是一个标题</h3>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
        </li>
        <li class="coll">
            <p>我是一个段落</p>
            <p>我是一个段落</p>
            <p>我是一个段落</p>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
        </li>
        <li>
            <p>我是一个段落</p>
            <p>我是一个段落</p>
            <p>我是一个段落</p>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
            <h3>我是一个标题</h3>
        </li>
    </ul>
    
    </body>
    
    图片.png

    相关文章

      网友评论

        本文标题:4.10 并集选择器

        本文链接:https://www.haomeiwen.com/subject/tkhcvxtx.html