$ ls ~yifei/notes/

CSS 选择器备忘录

Posted on:

Last modified:

这两天打算写写爬虫,准备用 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']某个属性的值包含给定的值

© 2016-2022 Yifei Kong. Powered by ynotes

All contents are under the CC-BY-NC-SA license, if not otherwise specified.

Opinions expressed here are solely my own and do not express the views or opinions of my employer.