css选择器

1.属性选择器
    属性选择器可以根据元素的属性及属性值来选择元素。css3中新增了三种属性选择器：E[att^=value]、E[att$=value]、E[att*=value]。
    1.1 E[att^=value]属性选择器

        E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串，E可以省略，如果省略，表示可以匹配满足条件的任意字符。例如，div[id^="section"]表示匹配包含id属性，且id属性是以"section"字符串开头的div元素。

        上面那个例子说明了只要p元素的id属性是以“one”字符串 开头就会被选中，而呈现特殊的文本效果。
    1.2 E[att$=value]属性选择器
        E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串，E可以省略，如果省略，表示可以匹配满足条件的任意字符。例如，div[id$="section"]表示匹配包含id属性，且id属性是以"section"字符串结尾的div元素。

        上面那个例子说明了只要p元素的id属性是以“main”字符串结尾就会被选中，而呈现特殊的文本效果。

    1.3 E[att*=value]属性选择器
        E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串，E可以省略，如果省略，表示可以匹配满足条件的任意字符。例如，div[id*="section"]表示匹配包含id属性，且id属性是包含"section"字符串的div元素。

        上面那个例子说明了只要p元素的id属性包含“demo”字符串就会被选中，而呈现特殊的文本效果。

2.关系选择器
    css3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器有符号“>”连接，兄弟选择器由符号"+"和"~"连接。
    2.1 子代选择器（>）
        子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1子元素的strong元素，可以这样写：h1>strong。

        上述例子说明，第15行代码中的strong元素为h1元素的子元素，第16行代码中的strong元素为h1的孙元素，因此代码设置样式只是对15行代码起作用。

    2.2 兄弟选择器
        兄弟选择器用来选择与某元素位于同一父元素之中，且位于该元素之后的兄弟元素，兄弟选择器分为临近兄弟选择器和普通兄弟选择器。
        <1> 临近兄弟选择器
            该选择器使用+号来连接前后两个选择器。选择器中的两个元素有同一个父亲，而第二个元素必须紧跟第一个元素。
        <2> 普通兄弟选择器

            该选择器使用"~"好来连接前后两个选择器。选择器中的两个元素有同一个父亲，而第二个元素不必紧跟第一个元素。

3. 结构化伪类选择器
    结构化伪类选择器是css3中新增的选择器。常用的结构化伪类选择器有:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n)选择器、:empty选择器、:target选择器。
    3.1 :root选择器
        :root选择器用来匹配文档根元素，在html中根元素是html元素。也就是说使用“:root选择器”定义的样式对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
    3.2 :not选择器
        如果对某个结构元素使用样式，单行排除这个元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。如body*:not(h2){}该选择器用于排除body结构中的子结构元素h2。
    3.3 :only-child选择器
        :only-child选择器用于匹配属于某父元素的唯一子元素的元素。
    3.4 :first-child选择器 和 :last-child选择器
        :first-child选择器 和 :last-child选择器分别用于父元素中第一个或者最后一个子元素设置样式。如p:first-child{}
    3.5 :nth-child(n)选择器 和 :nth-last-child(n)选择器
        :nth-child(n)选择器 和 :nth-last-child(n)选择器分别用于父元素中第N个或者倒数第N个子元素设置样式。
    3.6 :nth-of-type(n)选择器 和 :nth-last-of-type(n)选择器
        :nth-child(n)选择器 和 :nth-last-child(n)选择器与类型无关，:nth-of-type(n)选择器 和 :nth-last-of-type(n)选择器用于匹配属于父元素的特殊类型的第n各元素和倒数第n各元素。
    3.7 :empty选择器
        用来选择没有子元素活文本内容为空的所有元素。
    3.8 :target选择器
        用来为页面的某个target元素（该元素的id被当做页面中的超链接来使用指定样式），只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。
4. 伪元素选择器
    所谓为元素选择器，是针对css中已经定义好的伪元素使用的选择器。
    4.1 :before选择器
        :before选择器用于被选元素前面插入内容，必须配合content属性指定要插入的内容。
        <元素>:before{
        content:文字/url();
        }
        例如
        p:before{
            content:"传智播客";
            color:red;
            font-size:20px;
            font-family:"微软雅黑";
            font-weight:bold;
        }
    4.2 :after选择器
        :after选择器用于在某个元素之后插入一些内容，使用方法与:before相同。
        p:after{
        content:url(images/tu.jpg);
        }
5. 链接伪类
    它的名称通常由标记名、类名或者id名加上:构成。
    超链接标记<a>的伪类                 含义
    a:link{css样式规则}            未访问时超链接的状态
    a:visited{css样式规则}        访问后超链接的状态
    a:hover{css样式规则}        鼠标经过、悬停时超链接的状态
    a:active{css样式规则}        鼠标单击不动时超链接的状态
    注意：
    （1）同时使用链接的4种伪类时，通常按照a:link  a:visited  a:hover  a:active的顺序书写，否则定义的样式可能不起作用。
    （2）除文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。