CSS选择器
一.基本选择器
1.标签选择器 项目统一样式
标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。例如：
<style>
p{
height:100px;border:1pxsolidred;
}
</style>
<p>one</p>
<p>two</p>
<p>three</p>
2.类选择器（Classselectors）.同类型的样式
类选择器以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。例如：
<style>
.first{
font-weight:bold;
}
.done{
text-decoration:line-through;
}
</style>
<ul>
<li class="firstdone">CreateanHTMLdocument</li>
<li class="seconddone">CreateaCSSstylesheet</li>
<li class="thirddone">Linkthemalltogether</li>
</ul>
3.ID选择器（IDselectors）#唯一一个元素的样式
ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。例如：
<style>
#polite{
font-family:cursive;
}
#rude{
font-family:monospace;text-transform:uppercase;
}
</style>
<p id="polite">—"Goodmorning."</p>
<p id="rude">—"Goaway!"</p>
4.普遍选择器（Universalselector）*{padding:0;margin:0}
使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。例如：
<style>
.left-nav>*{
width:200px;background-color:#fafafa
}
</style>
<article class="left-nav">
<span></span>
<dl>
<dt>推荐</dt>
<dd class="current"><i class="icon-music"></i>发现音乐</dd>
</dl>
<dl>
<dt>我的音乐</dt><dd><i class="icon-cloud-download"></i>下载的音乐</dd>
</dl>
</article>
二.层次选择器
- 后代选择器（descendantselector）
- 使用“”隔开两个选择器。例如“ul li”表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。
- 子代选择器（childselector）
- 使用“>”隔开两个选择器。例如“ul>li”表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到。
- 相邻同胞选择器（adjacentsiblingselector）下一个兄弟元素
- 使用“+”隔开两个选择器。例如".one+*"表示选择class为"one"元素的下一个兄弟元素。
- 一般同胞选择器（generalsiblingselector）之后所有的兄弟元素
- 使用“~”隔开两个选择器。例如".one~*"表示选择class为"one"元素之后的所有兄弟元素。
三.属性选择器（Attributeselectors）
| [attr] | 选择具有attr属性的元素、无论该属性的值是什么 |
| [attr=val] | 选择具有attr属性的、并且attr的值为val元素 |
| [attr^=val] | 选择具有attr属性的、并且attr的值以val开头的元素 |
| [attr$=val] | 选择具有attr属性的、并且attr的值以val结尾的元素 |
| [attr*=val] | 选择具有attr属性的、并且attr的值包含val的元素 |
| [attr~=val] | 选择具有attr属性的、并且attr的值之一为val的元素 |
四.组合选择器
- 多个选择器组合使用，使用“,”分割。
- 例如"div,.one,#tt"表示选择div元素，class为one的元素以及id为tt的元素
- 嵌套选择器,多个选择器嵌套使用。
- 例如"div.one"表示class为one的div元素。
五.伪类选择器
伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。
六.伪元素选择器
伪元素以"::"开头，用在选择器后，用于选择指定的元素。