虽然学了一个学期的web，但大部分东西都没塞进脑子里，最近看了一点选择器，总结一下它的种类和特殊性吧。
ID相当于是一个人的名字，是唯一的，一个页面中不能有相同的ID名。
类选择器用的很多，设置样式离不开它。【注】类名的第一个字符不能用数字
派生选择器是允许根据上下文档的上下文关系来确定某个标签的样式
eg. li strong{font-style:italic; font-weight:normal;}
<p><strong>hello!</strong></p>
<ol>
<li><strong>hello!</strong></li>
</ol>
第一个hello!表现为粗体，第二个hello!表现为斜体(类选择器和ID选择器都可以被用作派生选择器）
属性选择器有好几种类型
1.[title]{color:red;}
2.[title=hello!]{color:red;}
3.[title~=hello]{color:red;}
4.[lang|en]{color:red;}
5.[attribute^=value]
6.[atrribute$=value]
7.[attribute*=value]
后代选择器
eg. h1>strong{color:red;}
<h1>this is<strong>important</strong></h1>
<h1>this is<em>really<strong>important</strong></em></h1>
第一个important变成红色，第二个important不受影响（因为strong不是h1的子元素而是后代元素）
选择相邻兄弟元素（只对后一种元素有效）
eg. ul+ol{color:red;}
<ul>
<li>hello!</li>
</ul>
<ol>
<li>hi!</li>
</ol>
<ol>
<li>haha</li>
</ol>
结果为：只有hi!会变色，haha和hello!都不变色
伪类选择器最常见的就是用于锚元素（a)
eg. a:link{color:red;}
a:visited{color:red;}
a:focus{background:blue;}
a:hover{color:black;}
a:visited{color:black;}
（顺序很重要）
伪元素选择器：
1.选择第一个子元素
eg. p:first-child{font-weight:bold;}
2.设置首字母样式
eg. p:first-letter{color:red;}
3.设置第一行的样式
eg. p:first-line{color:purple;}
4.设置之前和之后元素的样式
eg. h2:before{content:".";}
结果为： .this is important!
eg. h2:after{content:"}";}
结果为： this is important}
通配选择器
eg. *{margin:0;padding:0;}
设置文档中所有元素的内间距和外间距为0
选择器的特殊性
选择器的特殊性由选择器本身的组件确定。特殊值表述为4个部分，一个选择器的具体特殊性如下确定：
1.对于选择器中给定的各个ID属性值，为"0,1,0,0,"
2.对于选择器中给定的各个类属性值，属性选择器或伪类，为"0,0,1,0"
3.对于选择器中给定的各个元素和伪元素，为"0,0,0,1"
4.结合符（如">","+")没有特殊性
5.通配选择器为"0,0,0,0",即对其他选择器的特殊性不会造成任何影响
原文地址：http://www.cnblogs.com/candyqian/p/3737750.html
