【css】选择器介绍（二）后代选择器，子代选择器，交集选择器，并集（群组）选择器

本次总结的四种基础选择器，是使用之前的标签选择器，id选择器，类选择器所组合出来的。
选择器介绍（一）标签选择器、id选择器、类选择器
https://www.jianshu.com/p/d2f54bc64302

一、后代选择器（element1 element2）

示例：div p{}
含义：选中div中的所有p元素
两个选择器间使用空格分离。如下图，div中凡是为p的后代会全部被选中，无论是子辈还是孙子辈，红线部分即为被选中的段落。

后代选择器范围.png

示例：div>p{}
含义：选择div中的所有子代p元素
两个选择器之间使用大于号分离。在上图中，如果我们并不想选中div中的所有p，而是只想选中儿子一辈，不想选到li里的，就需要用到子代选择器啦。

子代选择器范围.png

示例：div.box1
含义：选择div中所有class值为"box1"的元素

        div.box1{
            background: pink;
        }

    <div class="box1" id="box1">1</div>
    <div class="box1" id="box2">1</div>
    <div class="box2">1</div>
    <p class="box1">1</p>

群组选择器.png

可以看到所有类名为box1的div都被添加了样式，但是类名不为box1的div并没有被添加样式，类名为box1，但是不是div的元素也没有被添加样式。
形如div.box1, div#box1,div.box1#box2 这样连着写的的都是交集选择器，含义即为取交集部分。

示例：box1,box2
**含义：选择class名为box1或box2的元素。

        .box2,#box2{
            background: pink;
        }

    <div class="box1" id="box1">1</div>
    <div class="box1" id="box2">1</div>
    <div class="box2">1</div>
    <p class="box1">1</p>

image.png

和上一部分同样的结构，可以看到id名为box2和类名为box2的元素都被选中了，在实际应用中，如果两个标签拥有同样的效果，就可以使用并集选择器。比如：

h1,h2,p{
   color:pink;
   font-size:16px;   
}

选择器部分文章：
选择器介绍（一）标签选择器、id选择器、类选择器
https://www.jianshu.com/p/d2f54bc64302
选择器介绍（二）后代选择器，子代选择器，交集选择器，并集（群组）选择器
https://www.jianshu.com/p/98f6788d0f54
通配符选择器&清除浏览器默认样式
https://www.jianshu.com/p/4eb179b4fdfc