这两天打算写写爬虫，准备用 css 选择器来抽取内容，翻译了 一篇文章，正好复习一下，这篇文章遵守 CC-BY-NC-SA 协议。

大多数的 web 开发者首先学会了 CSS。因为给 HTML 元素写样式规则的元素选择器都很容易理解和 记忆。经过一点点练习之后，就会发现成组的 CSS 表达式非常的有必要，比如使用一个逗号分隔开 选择器，就可以把同一个样式属性附加到不同的多个元素了。

使用标签选择器和分组的选择器当然也有不足，那就是他们会应用到所有的标签。很快你就会意识到 有时候需要给一个特定的元素加上样式。对于大多数开发者来说，最简单的选择当然是使用 class 和 id 选择器了。但是很遗憾的是这样下去的话，整个页面就会充满各种奇奇怪怪的类了。

除了不管的给 HTML 添加纯粹用于应用样式的 class 和 id 之外，你也可以考虑使用高级的 CSS 选 择器来给指定元素应用样式。高级的选择器大致可以分类为上下文选择器、属性选择器、伪元素选择 器和伪类选择器。

元素选择器

元素选择器把样式应用到所有选中元素上，也是被使用最广泛的选择器

选择器	语法	描述
元素	h2	选择页面上的所有 h2 元素，h2 {text-align: center;} 会把所有 h2 元素的文本居中对齐
分组	h1,h2,h3	选择页面上所有的 h1, h2, h3 元素，h1, h2, h3 {margin-bottom: .5em;} 将会把 h1, h2, h3 标签的底部 margin 设置成 0.5 em

class 和 id 选择器

Class 和 id 选择器是你能够把某些属性应用到个别元素上而不影响其他的。Class 让你能够按照概 念分类。两个或者更多元素可以属于同一个组。id 给一个元素一个唯一的标识，同一个 id 每个页面上只能使用一次。

选择器	语法	描述
Class	.warning p.warning	前者选择所有属于 warning 类的元素，后者选择所有属于 warning 类的 p 元素
id	#title	选择 id 为 title 的元素

上下文选择器

上下文选择器基于元素在 HTML 文档中的上下级关系来选择元素。

选择器	语法	描述
后代	#main li	选择一个元素的后代元素。注意这里不一定是直接子元素，后代即可。
相邻元素	h2+p	选择一个元素的直接相邻元素，比如说这个表达式只选择 h2 的直接相邻元素 p
子元素	div>p	选择所有直接子元素
所有相邻元素	h2~p	选择一个元素的所有相邻元素

伪类选择器

伪类选择器基于浏览器状态或者文档中的位置来选择元素。浏览器在幕后保存了好多状态，比如一个 链接有没有被访问过，一个元素有没有被选中，一个元素是不是它这种类型的第一个或者最后一个元 素，甚至于一个元素是不是它的父元素的第一个子元素。

所有处于同一个状态的元素被看做是属于同一个伪类，尽管在 HTML 中并没有明确声明类的名字。伪 类标识符用冒号 : 开头，而且一般是和元素名称放在一起用的。

用作链接和用户状态的伪类

当给一个链接应用样式的时候，按照下面表中的顺序来制定样式才能获得预期效果。

选择器	语法	描述
未访问的链接	:link	选择未访问过的链接，例如 a:link
访问过的链接	:visited	选择已经访问过的链接，例如 a:visited
用户焦点	:focus	选择当前拥有用户光标，可以直接输入的元素，例如 a:focus input:focus
悬浮	:hover	选择当前用户鼠标指针悬浮的元素
激活	:active	选择当前用户正在点击的元素

用于选择相邻元素的伪类

下面的 6 个选择器用于选择同一个父节点的元素中符合某种条件的元素，算是一个断言（assert）吧。

选择器	语法	描述
第一个元素	:first-child	如果指定的元素是他的父元素的第一个子元素，选择生效
最后一个元素	:last-child	如果指定的元素是他的父元素的最后一个子元素，选择生效
唯一子元素	:only-child	如果指定的元素是他的父元素的唯一一个子元素，选择生效
同类型第一个	:first-of-type	如果指定的元素是他的父元素的子元素中同类型的第一个，选择生效
同类型最后一个	:last-of-type	如果指定的元素是他的父元素的子元素中同类型的最后一个，选择生效
同类型唯一一个	:only-of-type	如果指定的元素是他的父元素的子元素中同类型的唯一一个，选择生效

随着元素和 DOM 树的更新，这些伪类能够应用的元素都是动态变化的。

CSS3 中的结构相关伪类

CSS3 提供了更灵活的选择方式，可以根据元素在文档中的位置选择一系列的元素。这些选择器还可以 接受一个参数

语法	描述
:nth-child(n)	父元素的第 n 个子元素
:nth-last-child(n)	父元素的倒数第 n 个子元素
:nth-of-type(n)	父类型子元素中，同类型中的第 n 个
:nth-last-of-type(n)	父类型子元素中，同类型中的倒数第 n 个

其中的 n 的取值往往取如下几种

值	含义
odd 2n+1	奇数
even 2n	偶数
2	第二个

伪元素选择器

伪元素选择器让你能够给虚构的元素增加样式，而不用在 HTML 中真的创建他们。::first-letter 和 ::first-line 选择了文本的一部分从而避免了使用 span 元素。 ::before 和 ::after 选择器用来在并不存在的地方动态插入文本。

CSS3 使用两个冒号来表示伪元素。为了兼容老浏览器，可以省略一个冒号（也就是 :first-letter）

选择器	语法	描述
第一个字母	::first-letter	选择指定元素的第一个字母
最后一个元素	::first-line	选择指定元素的第一行
之前	::before	选择指定元素之前生成的一个伪元素，和元素是相邻关系
之后	::after	选择指定元素之后生成的一个伪元素，和元素是相邻关系

属性选择器

属性选择器基于元素时候有某个特定的属性而定。下面的 7 中选择器中，后面 3 中是 CSS3 中新定 义的，浏览器们可能还没有完全支持。

选择器	语法	描述
存在	E[attr]	选择包含某个属性的元素
相等	E[attr='val']	选择某个属性的值等于 xxx 的元素
包含	E[attr~='val']	很鸡肋，把某个元素的值按空格分隔，如果包含给定的值，选中。优点类似于类的分隔
开头	E[attr|='val']	很鸡肋，某个属性的值以给定的值 + - 开头
开头	E[attr^='val']	某个属性的值以给定的值开头
结尾	E[attr$='val']	某个属性的值以给定的值结尾
包含	E[attr*='val']	某个属性的值包含给定的值