css3选择器

css3新增的选择器，我查了一些资料看到一个非常好的图片：

这张图片就概括了大部分重要的选择器，我给大家举例子！！；

子选择器
选择匹配的B元素，且匹配的B元素所匹配的A元素的子元素
A>B

div>em{ color: PINK; }


<div>
     <h3>我是标题</h3>
     <p>我第1个是p标签</p>
     <em>我第1个是em标签</em>
     <span>我是小标题</span>
     <em>我第2个是em标签</em>
     <em>我第3个是em标签</em>
</div>

效果就是div下面所有的em标签都会变成粉色！！！

通用选择器
选择匹配的B元素，且位于匹配的B元素后的所有匹配的A元素
A~B

div~p{ color:blue;}

<div>
     <h3>我是标题</h3>
     <p>我第1个是p标签</p>
     <em>我第1个是em标签</em>
</div>
<p>我就是紧贴在div元素后面的第一个p元素</p>
<p>我就是紧贴在div元素后面的第二个p元素</p>

效果就是。位于p标签之后的标签都会改变颜色！！！！

CSS3 结构性伪类选择器—empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用:empty选择器来控制。

p:empty {
  display: none;
}

CSS3 结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。CSS3 结构性伪类选择器—first-child

:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

CSS3 结构性伪类选择器—last-child
:last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。

CSS3选择器 :enabled和:disabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。

:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。要正常使用:disabled选择器，需要在表单元素的HTML中设置“disabled”属性。

CSS3选择器 ::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。