CSS 选择器

【CSS选择器包括：】
    基础选择器
    关系选择器
    属性选择器
    伪类选择器
    伪对象选择器

【基础选择器：】
    标签， id， class，通配符*

【关系选择器：】
    包含选择符 E F, 中间用空格
    子选择符 E>F, 对直接子元素起作用，对更深一层的元素不起作用
    相邻选择符 E+F, 选择相邻的第一个兄弟元素
    兄弟选择符 E~F, E元素之后的所有的兄弟元素，作用于多个元素

【属性选择器】（写法：元素[属性名="属性值"]， 等号课换成其他符号）：
    E[att] 具有att属性的E元素
    E[att="val"] att属性值是val的E元素
    E[att~="val"] att属性值中有一个值是val，那么E元素就会被选中
        例如：p[class~="p1"]{color:red;}
            <p class="p1 p2">段落</p> //被选中
            <p class="p3 p2">段落</p>
            <p class="p4 p2">段落</p>
            <p class="p4 p1 p2">段落</p> //被选中
    E[att^="val"] att属性值以val开始（前缀）的E元素
    E[att$="val"] att属性值以val结束（后缀）的E元素
    E[att*="val"] att属性值包含val,都会被选中
        例如：a[href*="baidu"]{color:red}
            <a href="www.baidu.com"></a> //被选中
            <a href="www.jd.com"></a>
            <a href="www.taobao.com"></a>

    E[att|="val"] att属性值是以 "val-" 开头的字符串

【伪类选择器】通过冒号来定义，为元素的不同状态添加样式（状态样式）
    E:link 设置超链接在未被访问前的样式 （“特指a标签”）
    E:visited 已经被访问的样式 （特指a标签）
    E:hover 设置鼠标放上面时的样式 （不限a标签，p li也可以）
    E:active 设置鼠标按下的样式 （不限a标签，p li也可以）
    E:not(s) 匹配不含有s选择器的元素E
        例如：div:not(.d1){color:red} not中的值不加引号
            <div class="d1">div块元素</div>
            <div class="d2">div块元素</div> //被选中
            <div class="d3">div块元素</div> //被选中
            <div class="d3 d1">div块元素</div>

    E:first-child 父元素的第一个子元素，如果E元素有父元素，而且E是父元素的第一个子元素
        例如：li:first-child{color:red} //匹配无效
              span:first-child{color:red} //span被匹配上
            <ul>
                <span>111</span>
                <li>首页</li>
                <li>服饰</li>
                <li>数码家电</li>
                <li>化妆品</li>
            </ul>
    E:last-child E有父元素且E是父元素的最后一个子元素
    E:only-child E有父元素且E是父元素唯一的子元素
    E:empty 匹配没有任何子元素和文本的元素E
        例如：p:empty {width:100px;}
            <p></p>  //被匹配
            <div></div> //空，但不是p元素
            <p>p元素</p>
            <p><a href="#">百度</a></p>
    E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
        例如：input:checked
    E:enabled input[type="text"]:enabled {}
    E:disabled input[type="text"]:disabled {}
    E:target
    E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
                    比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)