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 并集选择器

    1、 给所有选择器选中的标签设置属性 2、连接符:, 3、格式: 4、注意点:并集选择器必须使用,来连接选择器可以...

  • 常用选择器

    元素选择器 id选择器 id选择器的用法 类选择器 class用法 选择器分组(并集选择器) 并集选择器用法 通配...

  • 常用选择器

    1.id选择器 2.id用法 3.类选择器 4.class用法 5.选择器分组(并集选择器) 6.并集选择器用法 ...

  • 复合选择器(交集、后代、子代、并集)

    1、交集选择器 2、后代选择器 3、子代选择器 4、并集选择器 5、综合应用

  • CSS选择器

    css选择器: 标签选择器 id选择器 类选择器 后代选择器 子元素选择器 交集选择器 并集选择器 兄弟选...

  • CSS的选择器

    CSS基础选择器 标签选择器 id选择器 类选择器 CSS高级选择器 后代选择器 交集选择器 并集选择器(分组选择...

  • 2020-3-5

    1.HTML5 (1)标记选择器 (2)类别选择器 (3)ID选择器 (4)通配符选择器 (5)并集选择器 (6)...

  • 2022-02-03 CSS第二天

    emmet语法 CSS的复合选择器 后代选择器 子元素选择器 并集选择器 链接类选择器 focus伪类选择器 复合...

  • web前端入门到实战:HTML-并集选择器&兄弟选择器

    一、并集选择器 1.作用:给所有的选择器选中的标签设置属性。 2.格式: 3.例如: 4.注:支持多个标签取并集,...

  • CSS选择器、属性的三个特性、元素的显示方式、锚伪类、bpm

    目录 1.选择器 1.标签选择器、类选择器、id选择器、通配符 2.并集选择器、交集选择器、后代选择器、子代选...

网友评论

    本文标题:4.10 并集选择器

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