提升你的 CSS 选择器技能

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

我已经使用CSS多年了，但直到最近我还没有深入研究过关于 CSS 选择器的主题。

为什么我需要学习 CSS 选择器呢？ 我们现在知道了所有的内部选择器了吗？

问题是(至少对我来说是这样)随着时间的推移，很容易习惯在每个项目上使用相同的习惯的选择器集合来完成你要做的事情。

因此，我自己对 CSS 选择器知识进行了深入的审查，并发现了一些有趣的内容，这些内容对我来说是新的，或者是以前我从来没有想过这些使用方式。

我还发现了一些很酷的新选择器，将来可用，但还没有广泛使用。

我们一起来深入研究一下各种类型的 CSS 选择器吧。 您在日常工作中已经使用了，或者本文没涉及到的 CSS 选择器技能欢迎留言告诉我。

准备好提升你的 CSS 选择器技能了吗？我们一起 GO！

组合选择器

让我们从熟悉的选择器开始。组合选择器用于选择子元素和兄弟元素，并且相信大家已经使用了很长一段时间了吧。

A B
A > B
A + B
A ~ B

您应该熟悉相邻兄弟元素选择器 A + B ，他会选择紧跟 A 的 B 元素。但是一般兄弟元素选择器 A~B 呢？ 他将选择跟随 A 的所有兄弟 B 元素：

以下是实例：

See the Pen 组合选择器 Combinator Selectors by feiwen8772 ( @feiwen8772 ) on CodePen .0

第二行 New York 行被选中是因为它紧跟在第一行之后 table tbody tr:first-child + tr ，并且最后两个城市被高亮显示，因为他们被一般兄弟选择器 table tbody tr:nth-child(4) ~ tr 匹配，也就是第四行之后的所有行。

属性选择器

我非常喜欢属性选择器。当您需要将包含某个属性的元素与特定值匹配时，它们可以非常灵活。

See the Pen Attribute Selectors #1 by David Gwyer ( @dgwyer ) on CodePen .0

此示例演示如何选择所有复选框元素并将样式应用于其匹配标签，以使其变为粗体和蓝色。

然后，我们覆盖具有特定名称的 chk2 复选框的样式，并将其匹配的标签着色为红色。 请注意其他表单元素标签如何不受影响且未应用标签样式。

属性选择器不仅适用于表单元素，它们还可以定位任何元素的属性。 您可以匹配任何属性，而不仅仅是官方支持的属性。 此外，您可以检查属性是否存在，如下所示：

button[icon]

这匹配包含 icon 属性的 <button> 元素。它将匹配 icon 属性，无论 icon 属性是空值还是设置为特定值。 更多例子：

See the Pen Attribute Selectors #2 by David Gwyer ( @dgwyer ) on CodePen .0

第一个链接没有 target 属性，因此不匹配。 接下来的两个链接是匹配的，因为它们的 target 属性具有空值或特定值的属性。 最后，最后一个链接设置为粉红色，因为它 fluffy 属性匹配。 它的值无关紧要，只需要与 a[fluffy] 选择器相匹配即可。

一个实际的例子可能是突出显示没有alt属性的图像。 此属性对于网页的可访问性来说是所必需的，因此对于SEO而言，确保所有图像元素都包含此属性非常重要。

我们可以使用以下规则来实现此目的：

img:not([alt]) {
 border: 2px red dashed;
}

See the Pen Attribute Selectors #3 by David Gwyer ( @dgwyer ) on CodePen .0

如果要匹配属性值的特定部分，则可以使用一些非常有用的选择器。

• A[attr^=val] – 属性值以 val 开头。
• A[attr|=val] – 属性值以 val 开头，或者以 val- 开头。
• A[attr$=val] – 属性值以 val 结尾。
• A[attr*=val] – 属性值中包含 val 。
• A[attr~=val] – 匹配用空格分隔的属性值列表，并且列表中包含 val 。

以下是每个例子：

See the Pen Attribute Selectors #4 by David Gwyer ( @dgwyer ) on CodePen .0

前两个示例非常相似，不同之处是 A[attr|=val] 匹配后跟一个 - 字符串的值。 这对于匹配语言属性 lang 很有用。 例如 <p lang ="en-us"> 。

使用 A[attr$="val"] 可以轻松匹配文件扩展名，并且与 ::after 相结合你可以轻松显示匹配文件。 注意使用 attr() 方法和 content 属性将它与静态字符串连接起来。

A[attr*=val] 显示了无论使用何种协议或子域，您都可以匹配特定域 mysite.com 。

最后， A[attr~=val] ，它非常适合匹配由空格分隔的值列表组成的属性中的值。 这只匹配整个单词而不是单词片段，而 *= 匹配单词片段，因此单词复数形式将不匹配。这个有点不好理解：例如某 div 元素的 categories 属性为 <div categories="table wooden maple"> ，其 categories 属性用空格分隔。那么 div[categories~="table"] 将匹配各元素，还有一个特别要注意的是， <div categories="wooden maple table"> 也将被匹配。而 <div categories="wooden maple tables"> 或者 <div categories="wooden tableee maple"> 都不会被 div[categories~="table"] 匹配。

以上所有属性选择器示例都区分大小写。 但是我们有一个技巧。 如果我们在结束方括号之前插入一个 i ，我们可以启用区分大小写的匹配，这有点类似于 JavaScript 中的正则表达式匹配。

See the Pen Attribute Selectors #5 by David Gwyer ( @dgwyer ) on CodePen .0

除 Internet Explorer 和 Microsoft Edge 外，大多数主流浏览器都支持不区分大小写的匹配。

用户交互选择器

如果您处理过表单样式，那么您之前无疑会遇到这些类型的伪类选择器：

• :enabled
• :disabled
• :checked

例如，我们可以使用 :checked 来设置一个简单的待办事项列表。

See the Pen User Interface Selectors #1 by David Gwyer ( @dgwyer ) on CodePen .0

这是非常标准的，但我们可以使用其他一些有趣的伪类。 :default 匹配一个或多个元素，这些元素是一组相关元素中的默认元素。这也可以与复位按钮类型组合使用。

See the Pen User Interface Selectors #2 by David Gwyer ( @dgwyer ) on CodePen .0

我们可以使用伪类选择器来匹配输入值是否与 CSS 直接有效，以及在提交表单之前检查是否需要任何元素。

• :valid
• :invalid
• :required
• :optional (即不必须)

See the Pen User Interface Selectors #3 by David Gwyer ( @dgwyer ) on CodePen .0

如果您开始输入个人 email 输入字段，则必须检查有效性。 但是，工作 email 地址始终是必需的，并且需要有效检查有效性，因此不能留空。 还要注意我们可以链接伪类选择器（例如 :required:invalid ）来实现我们所需要的。

接下来，如果表单元素（支持 min 和 max 属性）在范围内，我们有两个可以匹配的伪类。

• :in-range
• :out-of-range

See the Pen User Interface Selectors #4 by David Gwyer ( @dgwyer ) on CodePen .0

同样，我们可以使用重置按钮类型来重置数字输入元素的默认值。

为了完善本节，我们来看看 :read-only ， :read-write 和 :placeholder-shown 的伪类。

See the Pen User Interface Selectors #5 by David Gwyer ( @dgwyer ) on CodePen .0

使用这些可以轻松匹配只读或可写（可编辑）的元素。 匹配元素不必是表单输入字段，如示例中所示。

最后， :placeholder-shown 将匹配尚未与之交互的元素，并仍显示默认占位符文本。 应谨慎使用此特定选择器，因为它尚未得到广泛支持。

结构选择器

结构选择器非常强大，基于它们在DOM中的位置匹配元素。 它们使您可以灵活地将元素与CSS完全匹配，否则需要 JavaScript 执行相同的操作。

这种类型的选择器与显示的选择器不同，因为其中一些选择器允许您传入参数来修改选择器的工作方式。

例如： nth-child() 接收一个值，该值将匹配特定子元素相对于其父容器的值。

因此，如果我们有一个项目列表，则以下选择器将匹配第三个项目：

ul:nth-child(3)

但是，参数不是必须是简单的数字，它可以是一个简单的表达式，而使伪类更强大。

有效表达式有：

ul:nth-child(2)
ul:nth-child(4n)
ul:nth-child(2n + 1)
ul:nth-child(3n - 1)
ul:nth-child(odd)
ul:nth-child(even)

表达式变量 n 总是从零开始，因此确切地计算出哪些元素将匹配， n 从 0 开始，然后 n 为 1 ，依此类推以编译元素列表。

这里还有 1 个简单而实用的小技巧，我们把 n 当做负数来用，会发生什么呢？

ul li:nth-child(-n+3)
ul li:nth-child(-2n+6)
ul li:nth-child(n + 10):nth-child(-n + 12)

例如：

See the Pen jXOeKY by feiwen8772 ( @feiwen8772 ) on CodePen .0

您可以将简单表达式与以下结构选择器一起使用：

:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()

See the Pen Structural Selectors #1 by David Gwyer ( @dgwyer ) on CodePen .0

:nth-last-child() 和 :nth-last-of-type() 非常类似于 :nth-child() 和 nth-of-type() ，唯一区别是 :nth-last-child() 和 :nth-last-of-type() 是从最后一个元素开始匹配，而不是第一个元素开始匹配。

通过玩各种组合，您可以通过选择器获得相当多的创意。 例如，之前的示例包含选择器：

ul:last-of-type li:nth-last-of-type(2)::after {
  content: "(2nd from end)";
  /* Other styles… */
}

这匹配第 2 个无序列表中最后一个列表项之后的伪元素。 如果你一直在努力解码一个复杂的选择器，那么最好从右到左阅读它，这样它就可以在逻辑上解构。

下一组选择器是专用的结构选择器，因为它们只匹配特定的子元素。 您无法将表达式传递给它们以修改其行为。

:first-child
:last-child
:only-child
:first-of-type
:last-of-type

See the Pen Structural Selectors #2 by David Gwyer ( @dgwyer ) on CodePen .0

乍一看，这里有很多事情，你在使用这些类型的选择器时需要小心，因为你可能得到你没想到的结果。

例如，您可能想知道为什么在 <section> 标记内的等等……文本是蓝色的。 实际上所有部分内容都是蓝色的，因为它是主 div 容器的最后一个子节点。 其他部分元素通过其他选择器覆盖自己的颜色，使单个段落变为蓝色。

如果你觉得这些结构选择器还不够，或者你觉得记不住，使用起来很麻烦，那么你可以使用Family.scss – 轻松搞定这些 :nth-child 伪类 :nth-child

否定、排除选择器

CSS 否定伪类选择器 :not(X) ，是以一个简单的以选择器 X 为参数的功能性标记函数，将从匹配的元素集合中排除选择器 X 所匹配的元素。选择器 X 中不能包含另外一个 :not 选择器。

:not() 伪类的优先级即为它参数选择器的优先级。 可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素。 但是前者的优先级更高。但是 :not() 伪类不像其它伪类，它不会增加选择器的优先级。

:not() 伪类可以将一个或多个以逗号分隔的选择器作为其参数。但是以多个以逗号分隔的选择器作为参数是实验性的，尚未广泛支持。

:not() 伪类时我们得选择器组合更加灵活，我们来看一些简单应用：

See the Pen :not() 伪类 by feiwen8772 ( @feiwen8772 ) on CodePen .0

上例中， .content :not(.notice) em 匹配了 .content 中所有的 em 元素，但是排除了 .content .notice 中 em 元素。

我们再来看看 :not() 和其他伪类选择器结合的例子：

See the Pen :not伪类 by feiwen8772 ( @feiwen8772 ) on CodePen .0

在做一个有间隔线的列表时，我们通常会去除最后一个 li 下的横线。 li:not(:last-child) 表示除了最后一个 li 元素之外的所有其他 li 元素。

内容选择器

这些属于用于匹配内容的一组专用选择器。我们可以立即使用的是：

• ::first-line
• ::first-letter
• ::selection – 兼容方案： https://www.css88.com/archives/5169

See the Pen Content Selectors #1 by feiwen8772 ( @feiwen8772 ) on CodePen .0

::first-line 和 ::first-letter 仅在应用于块级元素时才起作用。另外要小心只在特定元素上使用 ::first-letter ，否则每个段落都可能会应用。

目前还没有一些令人兴奋的内容选择器，但是当它们得到支持时，它们将开启各种可能性。

以下是需要注意的内容选择器列表：

• ::inactive-selection — 非活动窗口内的选定内容
• ::spelling-error — 检查可编辑元素的拼写和语法
• ::grammar-error — 匹配语法错误
• ::marker — 匹配列表项标记
• ::placeholder — 匹配表单元素的 placeholder 文本样式；兼容方案： https://www.css88.com/archives/5689

其他选择器

我们接下来提到其他几个选择器不适合不适合归类到上面任何类别。 别担心我们差不多完成了！ 不幸的是，其中大部分是实验性的，所以你必须等待一段时间才能在生产中使用它们。

:target 选择器的目标是一个 id 与当前 URL 的一部分匹配的元素。 比如下面 URL 匹配该URL页面中 id 为 part1 的元素：

https://css88.com#part1

我们可以将该元素应用以下样式：

:target { border: 1px red solid; }

其实 :target 选择器目前可以用于一些特殊的用例，欢迎查看：:target 伪类使用技巧

如果你有一个很大的选择器，那么 :matches() 可以帮助简化它。例如，如果您有以下选择器：

nav p.content,
header p.content,
main p.content,
sidebar p.content,
footer p.content {
  margin: 15px;
  padding: 10px;
}

然后可以通过 :matches() 简化，相当于：

太好了！这将有助于使样式表更具可读性。

接下来我们还有一个 :any-link 选择器，这个选择器是 :link 和 :visited 组合的简写。 所以下面这两个选择器实际上是相同的：

:any-link {
  color: red;
}

:link, :visited {
  color: red;
}

本文中最后两个选择器：

:dir()
:lang()

这些都与您网站的语言有关。

:dir() 接受参数 ltr 或 rtl ，具体取决于您要匹配的文本的方向，目前仅 Firefox 支持。

所以： :dir(rtl) 会匹配所有具有 RTL 方向内容的元素。

HTML文档中的每个元素都可以使用 lang 属性设置自己的单独语言。

<div lang="en">The language of this element is set to English.</div>
<div lang="el">Η γλώσσα αυτού του στοιχείου έχει οριστεί στα ελληνικά.</div>
<div lang="is">Tungumál þessa þáttar er sett á íslensku.</div>

将相同的基本文本输入到三个 <div> 标记中，但将特定国家/地区添加到内容的末尾。此外， lang 属性中使用的国家代码代表相应的国家/地区。

:lang(en) { color: red; }
:lang(el) { color: green; }
:lang(is) { color: blue; }

演示：

See the Pen Misc Selectors by David Gwyer ( @dgwyer ) on CodePen .0

好消息是所有主流浏览器都支持 :lang() 选择器。

资源

如果你试图查找一个选择器，或者需要深入研究CSS规范，那么你可能需要查看一些有用的资源：

• 当前可用的 CSS 的选择器集合
• MDN Web Docs
• CSS Specifications
• Can I Use

最后…

我希望你会发现这篇文章很有用。 可以帮助刷新你的CSS选择器技能，并尝试各种可能性。

使用纯 CSS 可以做很多很酷的事情，这在几年前是不可能实现的。

对于能够在纯 CSS 中进行一些非常高级的样式和动画的设计师来说，这是令人兴奋的，并且所有人都看不到一行 JavaScript 。

本文大部分内容来自： https://blog.logrocket.com/level-up-your-css-selector-skills-5d7bb45ddd37 ，在这篇文章的基础上做了很多内容的改进。