LESS 是一种 CSS 预处理器，它可以让我们更加方便地编写 CSS 代码，并帮助我们减少一些重复的代码。然而，在使用 LESS 的过程中，我们可能会遇到一些问题，其中之一就是 LESS 中伪类选择器失效的问题。那么，我们该如何解决这个问题呢？本文将为大家介绍一些方法。
问题分析
在 CSS 中，伪类选择器是非常常见的一个选择器，例如 :hover、:active、:before、:after 等等。这些选择器在 LESS 中同样可以使用，例如：
a {
&:hover {
color: red;
}
}上述代码中，我们使用了 & 符号来表示当前选择器（即 a），然后使用 :hover 选择器来指定当前元素在鼠标悬停时的样式。这样写起来非常方便，但是有时候在 LESS 中使用伪类选择器时可能会出现失效的情况。
这个问题的根本原因是，LESS 编译出来的 CSS 中，伪类选择器被编译成了伪元素选择器。例如，上述 LESS 代码编译出来的 CSS 代码可能是这样的：
a:hover {
color: red;
}这个 CSS 代码中，:hover 被编译成了 :hover::before，变成了一个伪元素选择器，所以在某些情况下会失效。
那么，我们该如何解决这个问题呢？
解决方案
方案一：使用 &:extend 选择器
LESS 提供了一个叫做 :extend 的选择器，可以用来复用一个已有的选择器，并且可以避免伪类选择器被编译成伪元素选择器的问题。使用方法如下：
-- -------------------- ---- ------- - - ------ ----- - ----------------------- -- ------- - ------ ---- -
上述代码中，我们先定义了一个名为 a 的选择器，并设置其颜色为蓝色。然后，我们在一个名为 .active 的选择器中定义了颜色为红色。接着，在 a:hover:extend(.active) 中使用了 :extend 选择器来扩展 .active，并且避免了 :hover 被编译成伪元素选择器的问题。
使用 :extend 选择器的好处是，可以重复使用一个已有的选择器，并且避免了伪类选择器被编译成伪元素选择器的问题。不过，需要注意的是，and、or、not 等逻辑运算符无法和 :extend 一起使用。
方案二：使用 &:after 和 &:before 选择器
在 LESS 中，我们可以使用 &:before 和 &:after 选择器来定义伪元素样式，从而绕开伪类选择器失效的问题。例如：
-- -------------------- ---- -------
- -
-------- -
-------- ---
-------- ------
------ -----
------- -----
----------------- ----
-
-------------- -
----------------- -----
-
-上述代码中，我们使用 &:before 选择器来定义 a 元素的伪元素样式，并设置其背景颜色为红色。接着，在 a:hover:before 中使用 :hover 伪类选择器来改变其背景颜色为蓝色。这样，就可以避免伪类选择器失效的问题。
不过，这种做法的缺点是，如果我们需要在同一个元素上应用多个伪类样式，就需要使用 &:before 和 &:after 等多个伪元素样式，可能会导致代码变得复杂而冗长。
总结
在 LESS 中，使用伪类选择器是非常常见的一种方式。但是在一些情况下，伪类选择器可能会失效，让我们很困惑。本文介绍了两种解决方法：一种是使用 :extend 选择器，并避免使用逻辑运算符；另一种是使用 &:before 和 &:after 选择器来定义伪元素样式。不同的方法有各自的优缺点，具体应该根据情况选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455dae0968c7c53b09386f9