在html中，选择器就是用来在页面中定位元素使用。浏览器对于不同
类型的选择器使用不同的方法查找元素；核心的选择器如下表所示（他们也是应
用最为广泛的选择器）：
一般情况下,使用基于id和class属性选取元素（简单选择器）。除了这
种情况之外，还有如下多种选择器方式可供使用：① 属性选择器
样例代码如下：
...
[lang]{
background-color: grey;
color: #ffffff;
}
[lang$="s"]{
font-size: 14px;
}
...
...
<body>
<h1 lang="en">h1类标题</h1>
<h2 lang="en">h2类标题</h2>
<h2 lang="es">h2类标题</h2>
...② 关系选择器
样例代码如下：
...
h1 ~ [lang]{
background-color: grey;
color: #ffffff;
}
...
...
<h2 lang="">h2类标题</h2>
<h1 >
h1类标题
<span lang="">span
<span>span的后代元素</span>
</span>
</h1>
<h2 lang="">h2类标题</h2>
<h2 lang="es">h2类标题</h2>
...③ 伪元素和伪类选择器
样例代码如下：
...
p:first-letter{
font-size: x-large;
color: red;
}
:nth-of-type(2){
background-color: red;
color: #000000;
}
...④ 联合选择器和反选择器
利用选择器组合实现联合选择和反选择。
样例代码如下：
...
h1, h2{
background-color: red;
color: #000000;
}
:not(html):not(body):not(:first-child){
border: medium double #000000;
}
...原文：http://blog.csdn.net/cqstart116/article/details/45952163