20.html-复合选择器

交集选择器：
        /* 标签选择器（元素选择器）标签名 元素名 只要匹配到对应的标签名元素名 就会被选中 */
        /* div{} */
        /* 交集选择器:既...又... 既要求元素名（标签名）是div 又要求原色的class属性值包含base
           两个标签挨在一起 中间不能有空格
         */
        div.base{
            background-color: chartreuse;
        }
        /* #test{} */
        div#test{
            background-color: aqua;
        }
        /* 交集：第一个为标签 第二个为类/id/伪类选择器 */
    <p class="base">base1</p>
    <div class="base">base2</div>
    <div>
        <div class="headerleft">1111</div>
        <div class="headerright">2222</div>
    </div>
    <div id="test">test</div>

并集选择器：
        /* 一次性选中页面上所有的元素 */
        /* div,.base,span,.header11,ul,li{
            background-color: blue;
        } */
        /* 其他的不变，只想选中第一个li标签 不选ul */
        div,.base,span,.header11,#li1{
           color: aqua;
        }
     <!-- 并集选择器（群组选择器）
          很多个选择器（任意的选择器）组合而成，选择器之间通过逗号连接
          {}之间的样式会作用到对应的选择器上 -->

兄弟选择器：
        /* 选择div标签之后的所有 p标签 p标签与当前div标签同层级 是兄弟关系 */
        div~p{
            background-color: aqua;
        }
        /* 选择div标签之后 紧挨着div的p标签 这个p标签和div同层级 是兄弟关系 */
        div+p{
            background-color: blueviolet;
        }

后代选择器：
        /* .son2{} */
        /* div:nth-child(2){} */
        /* div:nth-of-type(2){} */
        /* 页面上的class属性包含了son2就会被选中 */
        .son2{
            background-color: aquamarine;
        }
        /* 只想选中father下面的son2 */
        .father1 .son2{
            background-color: blueviolet;
        }
        /* 嵌套关系：把外层（祖先元素）的标签写在前面，子孙后代的写在后面 */
        /* 上面这两个选择器都是并集选择器（群组选择器） 这个并集选择器包含了两个选择器：都是后代选择器 后代选择器又包含了2个选择器：类 class */
        /* 选择father1当中的p标签 并且p标签的class包含了son1 和father2当中的son2 */
        .father1 p.son1,.father2 .son2{
            color: red;
        }
       <!-- 子孙后代 后代
          后代：通过祖先 选择 后代 由多个选择器组合而成 多个选择器之间用空格分隔开-->

子元素选择器：
        /* 子元素：只能通过父级选中子元素 亲儿子 
           父元素写在前面 子元素写在后面 中间用>链接*/
           .div1>.div3{
               color: aqua;
           }
        /* 选中class中包含div1的子元素 中class包含的div3 不选中子元素的后代 */