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元素。

五.伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

六.伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。