CSS3伪类选择器&层次选择器

CSS3伪类选择器

A、动态伪类选择器
动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动
态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作
用户行为伪类
最常见的锚点伪类：
.demo a:link {color:gray;} 链接没有被访问时
.demo a:visited{color:yellow;} 链接被访问过后
.demo a:hover{color:green;} 鼠标悬浮在链接上时
.demo a:active{color:blue;}鼠标点中激活链接那一下

B、UI元素状态伪类
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类。

注：这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type=“text"有enable和disabled两种状态，前者为可写状态后
者为不可状态；
IE6-8不支持”:checked",":enabled",":disabled"这三种选择器。
例如这里我们对带有禁止输入disabled标签的input标签改变背景色

结果：

C、结构伪类选择器
结构伪类的第一种情况就是下面这四种，也就是在父元素里面只有一种子元素时（比如上图box2中与h4同级的元素只有h4一种，至于h4中再有的元素则不受影响）
1、:first-child选择某个元素的第一个子元素；
IE6不支持:first-child选择器
2、:last-child选择某个元素的最后一个子元素；
3、:nth-child()选择某个元素的一个或多个特定的子元素；
注：nth-child(可以为odd或者even或者n+1这种数列式)
4、:nth-last-child(n) 选择该元素体的倒数第n个元素

		box2 h4:first-child {
            background-color: green!important;
        }
        .box2 h4:nth-child(odd) {
            background-color: skyblue;
        }
        .box2 h4:nth-child(even) {
            background-color: slateblue;
        }
        .box2 h4:nth-last-child(3) {
            background-color: red;
        }
        <!-- html部分 -->
	<div class="box2">
        <h4>1</h4>
        <h4>2</h4>
        <h4>3</h4>
        <h4>4</h4>
        <h4>5</h4>
        <h4>6</h4>
        <h4>7</h4>
        <h4>8</h4>
        <h4>9</h4>
        <h4>10</h4>
        <h4>11</h4>
        <h4>12</h4>
    </div>

我们利用结构伪类选择器对box2中：
第一个h4背景色改为绿色、奇数h4背景色为天空蓝、偶数h4背景色为紫色、倒数第3个h4背景色为红色，效果如下：

结构伪类的第二种情况：
当一个元素的子元素不止一种时，我们用到—>:nth-of-type()（较为常用）
nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素。（也就是排除其他类型元素之后的顺序）
例：

	.box3 h4:first-of-type{
            background-color: yellow;
        }
        .box3 h4:nth-last-of-type(2) {
            background-color: green;
        }
        .box3 h3:last-of-type {
            background-color: red;
        }
	<div class="box3">
        <h3>第一个h3</h3>
        <h3>第二个h3</h3>
        <h3>第三个h3</h3>
        <h4>第一个h4</h4>
        <h4>第二个h4</h4>
        <h3>第四个h3</h3>
        <h3>第五个h3</h3>
        <h4>第三个h4</h4>
        <h4>第四个h4</h4>
        <h4>第五个h4</h4>	
    </div>

第一个h4背景色为黄色、倒数第二个h4背景色为绿色、倒数第一个h3背景色为红色：

除此之外结构伪类选择器还有：
：only-child---->选择的元素是它的父元素的唯一 一个子元素；

:only-of-type---->选择一个元素是它的上级元素的唯一一个相同类型的子元素；
":only-child"表示的是一个元素是它的父元素的唯一一个子元素。 :only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的

:empty选择的元素里面没有任何内容。
:root选择文档的根元素

值得一提的是结构伪类选择器前面跟的是该元素，而不是该元素的父元素。

CSS3层次选择器

层次选择器主要为四类：
1、后代选择器(E F)
上元素后跟下级元素，用空格隔开，也不一定必须是父元素，也可以是上上级元素。
例div ul li a，如果没有其他div的情况下也可以直接div a选中所以的链接；
所有浏览器都支持和后代选择器；
2、子代选择器（E>F）
子元素选择器只能选择某元素的子（儿子）元素，其中E为父元素，而F为子元素，其中E>F所表示的
是选择了Ｅ元素下的所有子元素Ｆ。IE6不支持子元素选择器。
3、兄弟选择器（E+F）
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，
EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，也就是会选中该元素后面第一个兄弟元素；
例：

我们只想让标题h2后面第一个段落改变背景色为红色：

结果：
4、通用兄弟选择器（E~F）
通用兄弟选择器会择某元素后面的所有兄弟元素
这里我们让h2后面是有的p标签背景色都变成红色：

结果：

总结：CSS选择器可以帮助开发人员减少对html类名和id名的依赖，以及对html结构的依赖，使代码的编写更加的简单轻松。