复合选择器

后代选择器

假如有下面这么一个例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
    </head>
    <body>
        <div>
            <p>开心</p>
            <p>快乐</p>
        </div>

        <p>乐观</p>
    </body>
</html>

我们希望将开心和快乐变成红色，而不影响乐观，即将div标签下的p标签设置为红色，但不是所有的p标签设置为红色，所以不能这么写

p {
    color: red;
}

也许你们可能会写一个类，然后让这两个p标签去调用，但是假设div下有很多这样的p标签的话，这样做就不现实，我这里使用的是后代选择器，如下

div p {
    color: red;
}

即设置div标签下的p标签设置为红色。因为乐观所处的p标签不在div标签下，所以乐观不受影响。

效果如下:

子代选择器

假设有这么一个案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子代选择器</title>
    </head>
    <body>
        <ul>
            <li><a href="#">一级菜单</a></li>
            <li><a href="#">一级菜单</a></li>
            <li><a href="#">一级菜单</a></li>
            <li>
                <div><a href="#">二级菜单</a></div>
            </li>
        </ul>
    </body>
</html>

我们希望一级菜单变为红色，而二级菜单不受到影响，如果我们使用后代选择器，

ul li a {
    color: red;
}

那么li标签下的所有a标签都会受到影响，二级菜单也会受到影响，这个时候我们需要用子代选择器

ul>li>a {
    color: red;
}

上面便是子代选择器的写法，与后代选择器不同，子代只包括"儿子",而后代则是包括后代所有的。所以使用子代选择器，受到影响的只有li标签下的a标签，二级菜单没有受到影响。

效果为:

交集选择器

假设有下面这么一个案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>交集选择器</title>
    </head>
    <body>
        <div>啊啊</div>
        <div>啊啊</div>
        <div>啊啊</div>
        <p>一一</p>
        <p>一一</p>
        <p>一一</p>
    </body>
</html>

我们希望将第三个div标签中的文字设置为红色。很简单的一个方法就是这样

.red {
    color: red;
}

然后让第三个div标签去调用，但是我们这里做出要求，当p标签去调用这个类时，它的颜色不会改变。这个时候我们就要用到交集选择器

div.red {
    color: red;
}

上面的选择器表明，只有div标签调用这个类才会生效，其他标签调用这个类不会生效，这就是交集选择器。

并集选择器

假设又有下面这个案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>并集选择器</title>
    </head>
    <body>
        <div>123</div>
        <p>123</p>
        <h1>123</h1>

        <a href="#">123</a>
        <strong>123</strong>
    </body>
</html>

我们希望div,p.h1标签都设置为红色，其他的不变，我们可以这样写

div {
    color: red;
}
p {
    color: red;
}
h1 {
    color: red;
}

使用并集选择器可以使上面的代码大大减少

div, p, h1 {
    color: red;
}

使用逗号将标签或者类名隔开。

效果如下: