CSS基础知识（二）-复合选择器（后代选择器、子选择器、并集选择器、伪类选择器）

概述
复合选择器由两个或多个基础选择器，通过不同的方式组合而成的
复合选择器包括：后代选择器、子选择器、并集选择器、链接伪类选择器等等

后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

  元素1 元素2 { 样式声明 }

效果：

    <ul>
        <p>我是p</p>
        <li><p>我是li的儿子1</p></li>
        <li><p>我是li的儿子2</p></li>
        <li><span><p>我是li的孙子</p></span></li>
    </ul>

CSS：

        /* 后代选择器 */
        ul li p{
            color: pink;
        }

子选择器
子选择器只能选择作为某元素最近的一级元素，简单理解就是亲儿子元素

语法：

  元素1 > 元素2 { 样式声明 }

效果：

    <ul>
        <p>我是p</p>
        <li><p>我是li的儿子1</p></li>
        <li><p>我是li的儿子2</p></li>
        <li><span><p>我是li的孙子</p></span></li>
    </ul>

CSS：

        /* 子选择器 */
        ul li > p{
            color: pink;
        }

并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器的各选择器用英文逗号（,）连接而成，任何形式的选择器可以作为并集选择器的一部分。

语法：

  选择器1, 选择器2 { 样式声明 }

效果：

    <div class="box">div1</div>
    <p>p</p>
    <span>span1</span>

CSS：

        /* 并集选择器 */
        .box, span{
            background-color: powderblue;
        }
        p, span{
            color: pink;
        }

伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如为链接添加特殊的效果，或选择第1个，第n个元素

语法：

  元素: 伪类名{ 样式声明 }

链接伪类选择器 ：

        /* 链接伪类选择器 */
        /* 1.未访问过的链接 */
        a:link{
            color: pink;
        }
        /* 2.已访问过的链接 */
        a:visited{
            color: powderblue;
        }
        /* 3.鼠标经过的链接 */       
        a:hover{
            color: red;
        }
        /* 4.鼠标按下未弹起的链接 */   
        a:active{
            color: wheat;
        }

focus伪类选择器 ：
用于选取获得焦点的表单元素。

        /* focus伪类选择器 */
        input:focus{
            background-color: pink;
        }