css以及css3都包含了非常多的选择器，这些选择器给我们提供了极大的便利
在这篇随笔当中，入门阶段的元素选择器，id选择器，class选择器，群组选择器就不介绍了。这里我们要讲的是css中的层次选择器以及css3中的选择器
一、层次选择器
1.后代选择器：选择元素内部中所有的某一个元素，包括子元素和其他后代元素
语法：M N{}
说明：在后代选择器中，“M元素”和“N元素”之间用空格隔开，表示选中M元素内部后代N元素（所有N元素）。
2.子代选择器：选中元素内部某一个子元素，该选择器与后代选择器有着明显区别
（1）后代选择器选取得是所有元素
（2）子代选择器选取得是内部某一类子元素（仅限子元素，不包括子孙元素）
语法：M>N{}
3.兄弟选择器
语法：M~N{}
说明：选中M元素后面的某一类兄弟元素，记住，兄弟选择器只选取后面的所有兄弟元素，不包括前面的所有兄弟元素
4.相邻选择器
语法：M+N{}
表示选择M元素后面的某一个相邻的兄弟元素N。
技巧：li+li{/*样式代码*/}
使用在相邻选择器，表示选择li元素相邻的下一个li元素，因为最后一个li元素没有相邻的下一个li元素。所以对于最后一个li元素，没有下一个li元素可以选取
例如：li+li{border-top：2px soild red；}可以达到在两个li元素之间添加一个单边框的效果
二、CSS3选择器
（1）结构伪类选择器
1.第一类结构伪类选择器：（子元素选择器）
E:first-child 选择父元素的第一个子元素
E:last-child 选择父元素的最后一个子元素
E:nth-child（n） 选择父元素的第n个子元素或奇偶元素，n的取值为整数或者odd/even
E:only-child 选择父元素下的唯一个子元素（只有在父元素只有一个子元素的情况下才能使用）
以上的E是子元素，需要在前面添加父元素例如：ul li：first-child{/*css代码*/}，第一类结构伪类选择器特别适合与设置列表的列表项的不同样式，还有表格，列表中的隔行换色。
eg：
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
h1:first-child：选择的是h1，因为h1是div的第一个子元素
p：first-child:选择不到任何元素，因为p不是div的第一个子元素
2.第二类结构伪类选择器：（同级兄弟元素选择器）
E:first-of-type 选择同元素类型的第一个同级兄弟元素
E:last-of-type 选择同元素类型的最后一个同级兄弟元素
E:nth-of--type(n) 选择同元素类型的第n个或奇偶同级兄弟元素
E:only-of-type 匹配父元素中特定类型的唯一子元素（该父元素可以有多个子元素）
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
h1:first-of-type:选择的是h1，因为h1元素是所有h1元素里的第一个h1元素，而且也只有h1元素
p：first-of-type：选择的是p，因为p元素是所有p元素里的第一个p元素，而且也只有p元素
*所以，在通过第一类和第二类的比较后，我们可以发现，第一类结构伪类选择器是选择父元素下的第一个子元素（不区分元素类型），而第二类结构伪类选择器则是选择特定类型的元素的第一个元素（区分元素类型）
3.第三类结构伪类选择器：
1. :root 选择页面的根元素，也就是html元素
2. E:not() 选择括号内元素之外的所有元素
3. E:empty 选择一个不包含任何子元素和内容的元素
用法：这个选择器非常的实用，我们可以通过这个选择器来控制一些内容为空的表格单元格的样式
4. E:target 选取页面中某个target元素
*所谓的target元素，就是指id被当做页面内的超链接的元素
eg：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :target选择器</title>
<style type="text/css">
:target h3
{
color:red;
}
</style>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
其中，#表示返回顶部，#加id名，则表示返回至该页面的id所在地，也就是我们常说的锚点链接
target选择器里的样式，只有当链接被点击的时候才会被显示出来
（2）属性选择器
所谓属性选择器，就是通过属性来选择元素
1.E[attr^="属性值"]
选取了属性以双引号内属性值开头的元素
2.E[attr$="属性值"]
选取了属性以双引号内属性值结尾的元素
3.E[attr*=“属性值”]
选取了属性包含了双引号内属性值的元素
（3）UI元素状态伪类选择器
什么叫做UI元素状态：UI元素状态包括可用，不可用，失去焦点，获得焦点，选中，未选中
包括以下选择器：
1.E:focus 指定获取焦点的元素样式
一般情况下，E:focus主要针对与表单元素单行文本框text和多行文本框textarea
eg：
input:focus{
outline:1px solid red;
}
*outline属性用于设置文本框的外边框样式
2.E:checked 选择E元素中所有被选中时的元素
说明：目前只有opera浏览器支持E:checked选择器，该选择器一般用于表单元素单选框radio和复选框checkbox，设置他们的选中与未选中的状态
3.E::selection 改变E元素中被选择的网页文本的显示效果（用鼠标选中的文本）
说明：在这里，selection选择器前面的是双引号，这说明他是伪元素，而单引号则是伪类。默认情况下，被选中的文本都是蓝色背景，白色字体，我们可以利用这个选择器来改变这个样式
4.E:enabled 选择E元素中可用元素 || E:disabled 选择E元素中不可用元素
说明：表单元素默认情况下都是可用的，当我们在想要禁用的表单元素中加入disabled属性，这个表单元素就是出于被禁用状态，这时就可以使用这个选择器
5.E:read-write 选择E元素中可读写元素 || E:read-only 选择E元素中只读元素
说明：同上，用法类似可用于不可用元素选择器
7.E::before 在E元素之前插入内容，样式中必须有content || E::after 在E元素之后插入内容，样式中必须有content
说明：这两种伪元素选择器常用于清除浮动和创建小图标