CSS选择器的准确书写，保证了元素应用样式的正确性，CSS中选择器主要包括：
1、元素选择器：
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;} h1 {color:blue;} p {color:silver;}
2、类选择器：
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
如有这样一段HTML代码：
<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p>
如果只想选择所有类名相同的元素，可以在类选择器中忽略元素选择器：
.important {color:red;} 或者 *.important {color:red;}
只想选中p时，类选择器可以结合元素选择器来使用，选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。：
p.important {color:red;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
.important.urgent {background:silver;}
这段代码在以下元素中不能显示：
<p class="important warning"> This paragraph is a very important warning. </p>
但是在下面的元素中就能实现：
<p class="important urgent warning"> This paragraph is a very important and urgent warning. </p>
3、id选择器
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
类选择器可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。
4、后代、子级、同级选择器
在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
派生选择器包括选择被包含元素的后代选择器，选择子级的子级选择器，选择相邻的后面兄弟元素的相邻同级选择器，选择后面兄弟元素的同级选择器。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个后代选择器：
li strong { font-style: italic; font-weight: normal; }
这样会选择到li里面所有的strong元素。
如HTML代码所示：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
当li里面存在strong和p，p里面又有strong元素，这时想要选择li的strong而不选中p里面的strong时，可以写作：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li>
<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
<p>我是普通文字样式<strong>我是粗体但不是斜体，我不是li的子级元素</strong></P>
</li> <li>我是正常的字体。</li> </ol>
此时的css代码应当写作：
li>strong { font-style: italic; font-weight: normal; }
当希望实现选中标题下面的第一个段落设置为粗体，而不会选中后面的段落时，可以使用选择相邻的同级选择器：
<h1>我是标题，没有设置任何样式</h1> <p>我是h1相邻的兄弟元素，我是粗体</P> <p>我不是相邻的兄弟元素，我不是粗体</p>
对应的css代码应当写作：
h1+p{ font-weight: bold; }
当h1后面还跟有其余的元素，如div时，h1后面只能跟div，再写p时无法选中段落，因为此时h1和p已经不是相邻关系。如果想要选中后面的其余兄弟元素，应当使用：
h1~p{ font-weight: bold; }
样式将会设置到每一个前面有h1兄弟元素的p上面。
5、属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
下面的例子为带有 title 属性的所有元素设置样式：
[title] { color:red; }
当想要指定属性为某一属性值时，如为 title="hello" 的所有元素设置样式：
[title=W3School] { border:5px solid blue; }
当属性的值为多个值时，下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
当属性值以某段字符开始时，选中这些元素设置样式：
[title^=hello] { color:red; }
当属性值包含某段字符时，选中这些元素设置样式：
[title*=hello] { color:red; }
当属性值以某段字符结束时，选中这些元素设置样式：
[title$=hello] { color:red; }
属性选择器可以配合基本选择器使用，这样只会选中对应属性的这一种标签。另外，属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
6、伪类选择器和伪元素选择器
常见的伪类选择器：
:link
:hover
:active
:visited
:lang
结构性的伪类选择器包括有
:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素。
:not()选择器称为否定选择器，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
:nth-child() / :nth-of type选择某个元素的一个或多个特定的子元素。（选择元素中的第一个子元素，:first-child() ，同样可以适用于倒数在中间加上last即可，以及only-child指定唯一子元素）
伪元素选择器包括（本身为两个冒号，现在习惯写作一个冒号）：
:first-line / :first-letter选择器选择元素的第一行 / 第一个字母，比如说改变每个段落的第一行文本的样式，我们就可以使用这个
:before和:after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，也可以用来绘制三角形或者对话框，清除浮动将after设置为块级元素，在进行clear
::selection选择被用户选取的元素部分。
7、选择器总览