CSS选择器（附赠CSS3新增的选择器）

CSS选择器（下述直接称为选择器）主要分为 基础选择器 和 复合选择器

选择器的书写规范：

选择器 { 样式 = 属性 ： 值 }  注意 ： 选择器作用是选择标签也就是选择元素

简单理解：选择器的作用就是给谁更改样式 {改什么样式}

基础选择器

        1.标签选择器          h5 { 样式 }

        2.类选择器            .blue { 样式 }

        3.id选择器              #red { 样式 }

        4.通配符选择器      * { 样式 }

注意：通配符选择器 作用于全部标签 特殊情况才会使用 

复合选择器

        1.后代选择器        元素1  元素2  { 样式 }

（补充：元素1和元素2可以是任意选择器 之间用空格隔开 最终选择元素2实现。元素1是父亲 元素2是孩子（儿子/孙子都可只要是元素1的后代））

        2.子代选择器        元素1>元素2  { 样式 }

（补充：该选择器又被称为亲儿子选择器  只会选择亲儿子  元素之间用大于号隔开）

        3.并集选择器        元素1，元素2  { 样式 }

（补充：作用是可选择多组标签为他们定义相同样式。元素1和元素2之间用逗号隔开 任何形式选择器都可成为并集选择器的一部分）

        4.伪类选择器之链接伪类选择器        特点是用冒号（:）表示 start

  /* 1.选择没有点击过的链接 */

        #fake a:link {

            color: black;

            text-decoration: none;

        }

  /* 2.选择点击过的（访问过的）链接 */

        #fake a:visited {

            color: orange;

        }

  /* 3.选择鼠标经过的那个链接 */

        #fake a:hover {

            color: skyblue;

        }

  /* 4.选择鼠标长按而未弹起鼠标的那个链接 */

        #fake a:active {

            color: green;

        }

拓展：在开发中链接伪类选择器经常这样使用

#often a {

            color: #333;

        }      

        #often a:hover {         /* :hover是链接伪类选择器 */

            color: green;

        }    

以下是CSS3新增选择器   

1.属性选择器        用input元素来做解释说明

input[value] {

            color: pink;

}

input[type=password] {

            color: skyblue;

}

2.结构伪类选择器

<ul class="structure">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

.structure li:first-child {

            background-color: pink;

}

 .structure li:last-child {

            background-color: brown;

}

.structure li:nth-child(2) {

            background-color: gray;

}

（拓展 关于:nth-child选择器）

ol li:nth-child(even) {    /*选出偶数的孩子*/

     background-color: pink;

}

ol li:nth-child(odd) {     /*选出奇数的孩子*/

     background-color: plum;

}

ol li:nth-child(n) {      /*括号里面可用公式 n从0开始计算每次+1*/

     text-decoration: underline;

}

 /* nth-of-type选择器-拓展 */

section p:nth-of-type(1) {  

     background-color: purple;

}

3.伪元素选择器

before和after创建一个元素，属于行内元素；

在html页面检查不到，所以称之为伪元素；

before和after必须有content属性

before在父元素内容的前面创建元素;after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样权重为1

ul li::after {

            display: block;

            content: ">";

            width: 25px;

            font-size: 15px;

            color: pink;

        }