复合选择器

目录

一、分类

二、交集选择器（且）

三、并集选择器（或）

---

一、分类

1、交集选择器

2、并集选择器

二、交集选择器（且）

1、作用

选中同时符合多个条件的元素

2、语法

选择器1选择器2...选择器n {

            属性名:属性值;

}

3、举例

（1）代码

p.zhang {
            color: pink;
}

<p class="zhang">张三说：你好，李四</p>

（2）运行效果

4、注意

（1）有标签名，标签名必须写在前面

（2）用的最多的交集选择器是：元素选择器配合类名选择器，eg：p.zhang

三、并集选择器（或）

1、作用

选中多个选择器对应的元素，又称：分组选择器

2、语法

选择器1,选择器2,...选择器n {

        属性名:属性名;

}

3、举例

（1）代码

#nihao {
    color: chartreuse;
    font-size: 50px;
}
.zhang {
    color: pink;
    font-size: 10px;
}
.li {
    color: yellowgreen;
    font-size: 10px;
}
#nihao,
.li,
.zhang {
    background-color: cornflowerblue;
}

<h1 id="nihao">hello</h1>
<p class="zhang">张三说：你好，李四</p>
<p class="li">李四回答：你好，张三</p>

（2）运行效果

 4、注意

（1）并集选择器，一般竖着写

（2）任何形式的选择器，都可以作为并集选择器的一部分

（3）并集选择器，通常用户集体声明，可以缩小样式表体积