前言
LESS 是一种动态样式语言，它扩展了 CSS 语言，使我们可以使用变量、函数、运算符等特性，使得样式表更加灵活，易于维护。在 LESS 中，使用伪类选择器是经常用到的技巧之一。本文将详细讲解 LESS 伪类选择器的使用方法，并提供一些示例代码以供参考。
什么是伪类选择器？
伪类选择器是 CSS 的一种选择器，用于选择一些不属于文档树中的、与文档元素相关的状态、位置、结构等。常见的伪类选择器有 :hover、:active、:link、:visited 等。
在 LESS 中，我们可以使用伪类选择器来增强样式的复用性，从而减少代码量，并使代码更易于维护。
LESS 中的伪类选择器
在 LESS 中，使用伪类选择器和普通的 CSS 基本没有区别。唯一需要注意的是，如果我们要使用的伪类选择器是以冒号 : 开头的，那么在 LESS 中需要使用 & 符号来代替当前选择器。
普通伪类选择器
以下是一些常用的普通伪类选择器在 LESS 中的用法：
:hover
:hover 伪类选择器可以用于鼠标悬停在元素上时应用样式，例如：
a {
&:hover {
color: blue;
}
}:active
:active 伪类选择器可以用于元素被鼠标点击时应用样式，例如：
button {
&:active {
background-color: #ff0000;
}
}:visited
:visited 伪类选择器可以用于访问过的链接应用样式，例如：
a {
&:visited {
color: purple;
}
}基于位置的伪类选择器
除了普通的伪类选择器之外，我们还可以使用基于位置的伪类选择器来选择文档树中的某些位置，例如：
:first-child
:first-child 伪类选择器可以用于选中某个元素的第一个子元素，例如：
ul {
li:first-child {
margin-left: 0;
}
}在上面的例子中，我们选中了 ul 元素下的第一个 li 元素，并将其左边距设为 0。
:last-child
:last-child 伪类选择器可以用于选中某个元素的最后一个子元素，例如：
ul {
li:last-child {
margin-right: 0;
}
}在上面的例子中，我们选中了 ul 元素下的最后一个 li 元素，并将其右边距设为 0。
:not
:not 伪类选择器可以用于选中不符合某些条件的元素，例如：
ul {
li:not(:first-child) {
padding-left: 10px;
}
}在上面的例子中，我们选中了 ul 元素下的所有 li 元素，除了第一个子元素。
示例代码
以下是一些使用 LESS 伪类选择器的示例代码：
鼠标悬停时显示子菜单
-- -------------------- ---- -------
----- -
-- -
------- -
-- -
-------- ------
-
-
-- -
-------- -----
-- -
-------- -----
-
-
-
-在上面的例子中，我们选中了 .menu 中的每个 li 元素，并在鼠标悬停时显示相应的子菜单。
左右对齐的列表
-- -------------------- ---- -------
-- -
----------- -----
-------- --
------- --
-- -
------ -----
------ ----
------------- -
------ -----
-
-
-在上面的例子中，我们选中了 ul 元素下的每个 li 元素，并使其浮动到左侧，并将宽度设为 50%，以实现左右对齐的效果。
总结
LESS 中的伪类选择器是一种强大的工具，可以大大增强我们样式的复用性，并使得代码更加易于维护。当你在编写 LESS 样式时，务必要了解并掌握 LESS 中的伪类选择器的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647951a8968c7c53b0558a91