选择器
CSS中有7种选择器：
:fist-child选择某个元素的第一个子元素； :last-child选择某个元素的最后一个子元素； :nth-child()选择某个元素的一个或多个特定的子元素； :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of-type()选择指定的元素； :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算； :first-of-type选择一个上级元素下的第一个同类子元素； :last-of-type选择一个上级元素的最后一个同类子元素； :only-child选择的元素是它的父元素的唯一一个了元素； :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素； :empty选择的元素里面没有任何内容。
1、元素选择器
例如：
h1{
font-size:12px;
}
h2,h3,h4{
font-size:23px;
}
<h1>helloworld</h1>
<h2></h2>
...
2、类选择器：
例如：
.important{
background-color:red;
}
/*只有包含important 和 warning两个类的元素才会被选中*/
.important.warning{
background-color:sliver;
}
<p class="important">hw</p> <!--背景颜色为红色-->
<p class="important warning">hw</p><!--背景颜色为银色-->
3、ID选择器：
例如：
#name{
font-size:1.2em;
}
/*通配将会被忽略*/
*#name{
font-size:1.2em;
}
<input id="name" type="text" /><!--字体1.2倍当前字体-->
ID选择器和类选择器的区别：
a、ID选择器只能在一个HTML文档中使用一次
b、ID选择器不能结合使用
4、 属性选择器：
例如：
a[title]{
color:red;
}
<a title="1" href="1.html">1</a><!--颜色变红-->
<a href="2.html">2</a> <!--颜色无变化-->
/*根据多个属性进行选择*/
a[title][href]
/*根据具体值选择*/
a[href="1.html"]{
color:blue;
}
<a href="1.html">A</a><!--会被选中-->
<a href="2.html">B</a><!--不会被选中-->
/*多个属性值具体值匹配选择*/
a[href="1.html"][title="1"]
/*属性值必须完全匹配*/
p[class="important warning"]{
background-color:red;
}
<p class="important warning">D</p>
/*根据部分值选择*/
/*将只选择class中包含important的标签*/
p[class~="important"]
img[title~="Figure"]{
border:1px solid gray;
}
<img title="Figure 1" src="1.jpg"/><!--会被选中-->
<img src="2.jpg" /><!--不会被选中-->
/*子串匹配属性选择器*/
[abc^="def"] /*abc属性以def开头的*/
[abc$="def"]/*abc属性以def结尾的*/
[abc*="def"]/*abc属性包含def的*/
[attribute|=value] /*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/
5、后代选择器：
例如：
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1> <!--红色-->
<p>This is a <em>important</em> paragraph.</p>
如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
6、子元素选择器：
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <!--红色-->
<h1>This is <em>really <strong>very</strong></em> important.</h1>
7、相邻兄弟选择器：
例如：
li + li {font-weight:bold;}
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li><!--被选中-->
<li>List item 3</li><!--被选中-->
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li><!--被选中-->
<li>List item 3</li><!--被选中-->
</ol>
</div>
<!--上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。-->
伪类选择器：
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
伪元素：
a:visited:hover{color:red}
UI元素状态伪类：
:enabled，:disabled，:checked （IE6-8不支持）
例如：type="text" 对应enabled 和 disabled
type="raido" 和 type="checkbox" 对应 checked 和 unchecked两种状态。
css3的:nth选择器
