选择器的种类有很多，可以到 w3cschool 去看看了解一下。也可以在 慕课网 中实践一下。
一、上下文选择器
<style> h1 {font-size: 16px;} p {color:red;}
</style>
代码中的 h1和p 就是选择器，他们是选择器里面最常用的一种，叫做 标签选择器 。我们可以直接通过标签元素来指定需要添加样式的位置。
如果我们需要为多个标签添加同一种样式时，我们可以把它们组合在一起，每个标签选择器用“,”隔开，如下：
<style> h1,h2,h3 { font-weight: bold; color: blue; }
</style>
这样的组合我们叫它 分组选择器 。
后代组合选择器
当我们想为下面的 article和aside 的段落文本分别设置不同的字号时，我们就可以用到 后代选择器 了，它们是在祖先元素和后代元素之间加了一个空格，如代码所示：
<style> article p { font-size: 12px; } aside p { font-size: 14px; }
</style>
后代选择器有一个问题就是，祖先元素选择的后代元素都会带有样式，但是我们有时候并不需要所有的标签都带有样式，这个时候我们就要用到其他的选择器了。
子选择器
我们可以用DOM中的父子元素关系来选择，也就是 子选择器 ，两个元素中间用“>”来连接，如代码所示：
<style> article>p { font-size: 12px; }
</style>
同胞选择器
我们也可以通过同胞关系来选择，叫做 同胞选择器 或者是 兄弟选择器 ，这就意味着选择器的标签元素需要具有同一个父元素，它们之间用“+”来连接，例子：
<style> h2+p { font-size: 12px; }
</style>
并且需要注意的是： p 标签必须是紧跟在 h2 标签的后面。
一般同胞选择器
一般同胞选择器中间用“~”连接。
<style> h2~p { font-size: 12px; }
</style>
一般同胞选择器和同胞选择器的区别就是， p 标签不一定是紧跟在 h2 标签的后面。
通用选择器
通用选择器是使用通配符“ * ”，它可以匹配任何元素。比如：
*｛ color: green;
｝
它会导致所有文本和边框都变成绿色。这里有个小知识：
color属性设定的是前景色。前景色既影响文本也影响边框，但通常我们只用它设定文本颜色。
我们也可以这样使用通用选择器：
p* { color: green;
}
这样只会把 p 包含的所有元素的文本变成红色。
通用选择器还有一个有意思的用法，就是可以用它构成一个 非子选择器 ，比如：
section*a { font-size: 1.3em;
}
代码所表示的是，所有 section 的孙子元素，而非子元素的 a 标签都会被选中。这个从逻辑上来说也好理解，左边的 section 代表通配符的父元素，右边的 a 代表通配符的子元素，而 * 就是所有中间元素的集合。
以上就是通过DOM的层次结构的“上下文”关系来表示的选择器。
二、id和类选择器
id和类选择器是我们在CSS中常用的选择器，它们可以更精确的定位到我们要添加样式的标签位置。只要在HTML标记中为元素添加id和class属性，就可以通过id和类选择器直接选择。
可以给id和class属性设定任何值，但不能以数字或特殊符号开头。
类选择器
body 标签包含的任何HTML元素都可以添加class属性，如：
<h1 class="specialtext">这是一个H1标签</h1>
<p>这是一个段落。</p>
<p class="specialtext featured">这是另一个段落</p>
1、类选择器
然后我们就可以用类选择器添加样式了，类选择器前面要加一个“ . ” ，后面跟着类名，如下：
<style> p { font-family: helvetica,sans-serif; } .specialtext { font-style: italic; }
</style>
2、标签带类选择器
当然，需要更精确的也可以这样写：
<style> p { font-family: helvetica,sans-serif; } .specialtext { font-style: italic; } p.specialtext { color: red; } p.specialtext span{ font-weight: bold; }
</style>
第三个样式只选择带 .specialtext 类的 p ，第四就更精确到 p 中的 span 元素了。
3、多类选择器
同个标签可以存在多个类属性，每个类都用空格分隔，要选择两个类名可以这样写：
<style> .specialtext.featured { font-size: 120%; }
</style>
注意：CSS类选择器的两个类名之间没有空格，如果加了空格就变成了“祖先/后代”关系的上下文选择器了。
ID选择器
ID与类的写法相似，只不过id选择器前面用“ # ”后面跟着id名，
<style> \#specialtext { font-style: italic; }
</style>
***
***
***
<p id="specialtext">这是一个特殊段落</p>
id还可以用于页内导航
<a href="\#bio">Biography</a>
这样的链接就可以直接在页面内跳转到具有id名为“bio”的标签的位置。如果没想好“href”中放什么链接，也可以用“#”来充当占位符。
什么时候用id，什么时候用类
1、什么时候用id
id的用途是在页面中唯一地标识一个元素，强调的是唯一性。每个id名称必须是不相同的，而且每个id名称在页面中只能用一次。尤其是于JavaScript关联时，相同的id可能会导致JS行为异常。通常我们在
2、什么时候用类
类的目的是为了标识一组具有相同样式特征的元素，强调的是通用性。切不可乱用类，这样会增加需要编写和维护的CSS量。
总结（来自知乎：Milo）
- ID具有唯一性，Class具有普遍性。
- ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
- Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
- ID的样式优先级高于Class。
三、属性选择器
我们可能会遇到这样的HTML代码：
<img sec="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
如果我们想要为带有title属性的图片添加样式，那么我们就可以用到 属性名选择器 了，如下：
img[title] { border: 2px solid blue;
}
这时，图片就会显示2像素宽的蓝色边框。一般来说title属性和alt属性都是设定相同的值，增加可阅读性。
属性值选择器
属性值选择器就更精确地定位我们所需要添加样式的位置了。如下：
img[title="red flower"] { border: 4px solid green;
} 
只有在title属性值为“red flower”时，才会为图片加上边框样式。
属性和值选择器-多个值
[title~="hello"]{ color: red;
}
该例子为包含指定值的title属性的所有元素设置样式,适用于由空格分隔的属性值。 测试
[lang|=en] { color: red;
}
该例子为带有包含指定值的lang属性的所有元素设置样式。适用于由连字符分隔的属性值。 测试
设置表单样式
input[type="text"]{ width: 50px; display: block;
}
input[type="button"]{ width:12opx; margin-left:35px;
}
选择器参考手册[attribute] 用于选取带有指定属性的元素。[attribute=value] 用于选取带有指定属性和值的元素。[attribute~=value] 用于选取属性值中包含指定词汇的元素。[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。[attribute^=value] 匹配属性值以指定值开头的每个元素。[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
四、伪类
伪类与类相似，但它并没有附加到标记中的标签上，所以称之为伪类，伪类分两种：
- UI伪类 ，会在html元素处于特定状态时，为该元素应用CSS样式。
- 结构化伪类 ，会在标记中存在某种结构上的关系时，为相应的元素引用CSS样式。
UI伪类
1、链接伪类
针对连接的伪类一共有四个，也是我们常用伪类，它们的顺序也始终是这样的：
a:Link {color: black;} a:visited {color: grey} a:hover {text-decoration: none;} a:active {color:red;}
一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。
很多时候不一定要将四个元素都写出来。而且这些伪类也可以用于任何元素，如下：
p:hover {background-color: grey;}
这条代码就可以使鼠标悬停在 p 标签位置时，背景颜色变为灰色。
2、focus伪类
任何元素都可以运用focus伪类，但一般用于表单：
input：focus ｛background-color: yellow
表单中的文本框在用户单击它时会获取焦点，同时为该文本框添加一个黄色背景。 测试
3、:target伪类
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用 :target 选中它。
<style> \#more_info:target {background:\#eee;}
</style> <a href="\#more_info">More Information</a> <h2 id="more_info">This is the information you are looking for.</h2>
用户单击链接跳转id为more_info的元素时，为该元素添加浅灰色背景。 维基百科在其引证中就大量地使用了:target 伪类 。
结构化伪类
1、:first-child和:last-child
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。如下：
<style> ol.results li:first-child { color: blue; } ol.results li:last-child { color: red; }
</style> <ol class="results"> <li>MY FAST PONY</li> <li>STEADY TROTTER</li> <li>SLOW OL'NAG</li>
</ol>
2、nth-child(n)
n可以是表示一个数值（也可以使用odd或者even表示奇数和偶数，也可用2n+1或者2n来表示），例如：
li:nth-child(3) {color: grey;}
:nth-child伪类最常用于提高表格的可读性，交替使用不同的颜色。
还有 伪元素,内容有点多，就不一一介绍了。
参考资料：《CSS设计指南》、[w3cschool] http://www.w3school.com.cn/ )
我的博客： http://liuxiaoyu.cc 欢迎骚扰~
摘自CSS选择器详解
