标签：
CSS 选择器分为：元素选择器、分组选择器、通配符选择器、类选择器、ID 选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类、伪元素。
一. 元素选择器(p)
选择器可以是 HTML 元素，比如 p、h2、body，甚至是 html 本身。
# code 1 #selector type
<style type="text/css">
body {
margin: 0 auto;
max-width: 50em;
font-family: cursive, "Arial", sans-serif;
line-height: 1.5;
padding: 4em 1em;
color: #555;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
h2, strong {
color:#333;
}
</style>
<body>
<h2>《人类简史》书摘</h2>
<p>金钱、社会地位、整形手术、豪宅、握有大权的职位，这些都不会给你带来<strong>快乐</strong>。想要有长期的快乐，只能靠血清素、多巴胺和催产素。</p>
</body>
二. 分组选择器(h2, strong)
如果某些元素的样式是一样的，那可以把修饰这些样式的选择器，列为一组，选择器之间用逗号隔开。比如，# code 1 中我们就这样写了：
h2, strong {
color:#333;
}
三. 通配符选择器(*)
显示为一个星号(*)，表示匹配任意一个元素。是 CSS2 引入的。
......
通配符选择器可以看成是一个特殊的分组选择器，它是“列出了”文档中的所有元素进行的声明。
四. 类选择器(.)
一个点号(.)后面跟上类名，就是类选择器了。它可以单独使用，也可以和别的元素结合使用。
......
一个 class 值还可以包含一个词列表，各个词之间用空格分开：
......
上面的选择器称为多类选择器。
五. ID 选择器(#)
ID 选择器类似于类选择，不过也有一些差别：
1). ID 选择器以 # 号开头；
2). ID 选择器引用 id 属性中的值；
......
那 ID 选择器与类选择器有哪些不一样的地方呢？
1). 一个 id 值在 HTML 文档里只能用在一个元素上。这不同于 class 的值，上面我们讲到类选择器时，类名 important 被用到 p 和 h1 元素上，其实 important 还可以应用到更多的元素上，它修饰具有相同样式的一类元素。而一个 id 值唯一标记 HTML 文档里的一个元素！
2). 与类属性不同的是，ID 属性值不可以是词列表，这一点应该很好理解。
......
它是错的，一个 id 值唯一标记 HTML 文档里的一个元素。
六. 属性选择器([])
根据元素的属性或属性值，来选择元素，CSS2 引入。
将包含 title 属性的所有元素颜色设置为红色：
......
只对有 href 属性的 a 元素应用样式：
......
还可以根据多个属性进行选择，只需要将属性选择器连接在一起就可以了：
......
根据属性值进行选择：
......
如果属性值是个值列表，还用 = 进行匹配的话，那么必须要与属性值完全匹配才行：
......
问题来了，一定要与属性值完全匹配吗？不是的，看下面：
......
我们用 ～= 来实现部分属性值的匹配，这称为部分值属性选择器。
在 CSS2 之后，还发布了更多的部分值属性选择器，其中就有“子串匹配属性选择器”，包括 IE7 在内的许多浏览器都支持的，下面是这些选择器的简单总结：
......
最后为你介绍，特定属性选择器 |= ：
......
这里会匹配 lang 属性的值为 en 或以 en 开头的所有元素。
七. 后代选择器(这里假装有个空格)
Descendant Selector，如果你希望对 ul 元素中的 em 使用样式，可以这样写：
......
代代之间用空格分开。上面的 em 元素不管嵌套的层数，样式效果始终对它有效。ul em 可以理解成“作为 ul 元素后代的任何 em 元素”。
八. 子元素选择器(>)
相比后代选择器对所有后代生效，子元素选择器(用 >)只对子元素有效，或者说只对“儿子”有效。
看，与上面 7.* code * 的代码一样，样式生效的只有“儿子”。
下面，是结合后代选择器和子选择器的例子：
......
这个选择器选择了 p 元素进行样式渲染，这个 p 元素是 td 的子元素，而 td 是类名为 company 的 table 元素的后代。
九. 相邻兄弟选择器(+)
如果要选择紧接在另一个元素后的元素(二者有相同的父元素)，可以使用相邻父亲选择器(Adjacent sibling selector)。
......
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样使用：
......
用一个结合符，只能选择两个相邻兄弟中的第二个元素，请看下面的例子：
......
上面的这个选择器，只会把第二、第三个列表项变为粗体，第一个列表项不受影响。
十. 伪类(:link)
先让我们来看一下，伪类有哪些。
:link 未被访问的链接的样式
:visited 已被访问的链接的样式
:hover 当鼠标悬浮在元素上方时，元素的样式
:active 被激活的元素样式
:focus 处于输入焦点状态的元素样式
:first-child 父元素的第一个子元素的样式
:lang 为不同的语言定义特殊的样式
这是伪类的语法：
......
或者
......
下面我们来对上面所列举的伪类，进行说明。
链接的不同状态(未访问、已访问、鼠标悬停、活动)可以有不同的显示样式：
......
为了能让链接的样式相称的显示出来，你需要按照这样的顺序去定义样式：:link —— :visited —— :hover —— :active。
可以使用 :first-child 伪类，来选择所处父元素的第一个子元素：
......
上面的样式是在匹配第一个 p 元素和 li 元素。
下面是匹配第一个 p 元素里的 i 元素：
......
:lang 伪类使你有能力为不同的语言定义特殊的规则：
......
十一. 伪元素(first-letter)
伪元素与伪类相似，它有些这些选项：
:first-letter 文本第一个字母的样式
:first-line 文本第一行的样式
:before 在元素之前添加内容
:after 在元素之后添加内容
伪元素的语法与伪类一样：
......
或者
......
下面，我们还是按部就班的，对上面的伪元素进行说明。
我们用 first-letter 对 p 元素的第一个字母设置样式：
......
再用 first-line 对 p 元素的第一行文本设置样式：
......
然后同时使用 first-letter、first-line 对 p 元素的样式进行设置：
......
:before
......
:after
......
(完)
CSS 选择器
标签：
原文地址：http://www.cnblogs.com/zhangbao/p/5743401.html
