前端必须掌握的伪类选择器

在我们编写 CSS 代码时，在选择 HTML 元素上，会碰到一些问题。

如果我们的选择器范围太大，容易误伤其他元素，这也是我们不推荐使用标签选择器的原因。

但如果我们的选择器范围太小，比如都使用类选择器，会导致我们的 HTML 代码要加很多的类名，写起来比较费劲，篇幅长看着就很冗余。

因此，我们需要练习如何灵活选择我们想要的元素。

今天给大家介绍一个所有前端都必须要掌握的 CSS 技巧 —— 伪类选择器。

伪类选择器简介

我们平常使用最多的是类选择器，用于选择那些设置了类名的元素。

伪类选择器是类选择器的补充，主要有以下 2 个用途：

• 难以设置类名的元素：比如一些状态伪类：:link，:visited，:hover，:active，:focus，:checked，:disabled 等等，这些是同一个元素的不同状态，这些状态不能在 HTML 代码中标记出来，所以我们不能实现：当元素处于某种状态的时候设置类名，离开了这种状态之后又不设置类名。因为正常的类选择器实现不了这个，所以需要使用伪类选择器。
• 减少类名，简化我们的代码：有些场景我们需要选择特定的一些元素，如果使用类选择器，需要给这些特定的选择器加很多类名，使用伪类选择器，可以不需要设置类名就选中这些元素，帮助我们简化我们的代码，比如下面的例子：

上面的例子，同一层级有 3 个 p 元素，现在想改变其中一个元素的字体颜色。

如果使用类选择器，我们就需要给这个元素添加类名，比如上面例子里的第一个元素，设置为红色字体。

如果使用伪类选择器，我们就可以不用添加类名了，比如上面例子里的最后一个元素，设置为绿色字体。

好了，伪类选择器的基础就介绍到这里了。

对于第一种伪类选择器，我们没得选择，因为类选择器实现不了，只能使用伪类选择器，对于明确的东西，就所以没什么好讨论的，当我们有这种功能述求的时候，只能使用伪类选择器。这些伪类选择器也不需要特别去记忆，当你需要用的时候再去查，或者咨询 AI 现学现用就可以了。

今天重点要讨论的是第二种伪类选择器，这种伪类选择器如果不用也是可以实现想要的功能的，就是要设置很多类名。如果你学会熟练应用这些伪类选择器的话，就可以简化你的代码，这也是你跟其他前端开发拉开水平差距所在。

first-child & last-child

first-child 和 last-child 是最常用的结构伪类选择器，典型使用的场景是列表，比如下面这个例子：

我们通常会使用 float 或者 inline-block 来实现一个平铺的列表元素，然后这些元素带有一定的间距。

绝大部分情况，我们都会因为最后一个元素的 margin-right 间距导致一行放不下，导致最后一个元素被换行了。就像上面的例子显示的那样。

这个时候，我们通常就需要把最后一个元素的间距给去掉，才能放下。为了实现这个效果，我们就可以使用 last-child 来选中这个元素，而不需要给这个特殊的元素添加一个新的样式类了。

再举一个例子，我们经常会碰到一些成对的元素，比如一些双列布局，左右箭头按钮，左右 banner 等等。

传统来说，我们都会给他们设置 xxx-left 和 xxx-right 类名来分别设置想要的样式。

但如果我们擅于应用 first-child 和 last-child 的话，就可以精简我们的代码，比如下面的例子：

应用伪类选择器的注意事项

教你一个小技巧，什么时候应该使用伪类选择器？

当你觉得新增很多 class 觉得难受的时候，就可以考虑使用伪类选择器。

另外，在应用伪类选择器时，需要注意：

不要滥用伪类选择器，因为 HTML 结构变更可能会影响选择器的目标元素，不利于维护。

因此，需要注意以下 2 个场景：

• 需要选中的元素的语义是不是跟伪类选择器定义一致？比如你是不是要给第一个子元素添加样式，不管第一个子元素是什么元素或者什么内容？如果不是，就尽量不要使用 first-child 了，不要因为我们的目标元素正好处在第一个子元素的位置，就滥用伪类选择器。
• 目标元素是否需要添加逻辑？如果目标元素需要添加一些逻辑，比如绑定事件，那最好还是给它添加类名吧，这样也方便 JS 获取该元素，使用伪类选择器反而不利于 JS 获取元素，得不偿失。

最后的一个注意事项是：

如果你在苦恼，现有的伪类选择器无法选中目标元素，或者用起来比较别扭，那你可以尝试调整你的 HTML 结构。

你要永远记住，HTML 和 CSS 是互相关联的，它们要配合起来，才能产出优秀的、高可维护的代码。

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。