在前端开发中，CSS 选择器是必不可少的一部分。LESS 是一种 CSS 预处理器，它提供了更加灵活和强大的选择器语法，让我们可以更加方便地编写样式。本文将介绍 LESS 中 CSS 选择器的嵌套和伪类的应用技巧，帮助读者更好地掌握 LESS 的使用。
嵌套选择器
在 LESS 中，我们可以使用嵌套选择器来描述 HTML 元素的层级关系，从而更加方便地编写样式。例如，我们可以使用以下的 LESS 代码来描述一个列表：
ul {
li {
color: #333;
&:hover {
color: red;
}
}
}上面的代码中，我们使用了嵌套选择器来描述列表元素的层级关系。在 LESS 中，我们可以使用 & 符号来表示当前选择器的父选择器。在上面的代码中，&:hover 表示当前选择器为 li:hover。
嵌套选择器不仅可以描述层级关系，还可以描述伪类和伪元素。例如，我们可以使用以下的 LESS 代码来描述一个带有箭头的按钮：
-- -------------------- ---- -------
------- -
--------- -
-------- ---
-------- -------------
------ --
------- --
----------- --- ----- ------------
-------------- --- ----- ------------
------------- --- ----- -----
--------------- -------
------------- ----
-
--------------- -
------------------- ----
-
-上面的代码中，我们使用了 &::before 来表示当前选择器为 .button::before。在 &:hover::before 中，我们使用了 & 符号来表示当前选择器为 .button:hover::before。
伪类选择器
伪类选择器是 CSS 中常用的一种选择器，它可以选择元素的特定状态。在 LESS 中，我们可以使用伪类选择器来更加方便地描述元素的状态。例如，我们可以使用以下的 LESS 代码来描述一个带有动画效果的按钮：
-- -------------------- ---- -------
------- -
----------- --- ---- -----
------- -
----------------- -----
------ -----
-
-------- -
---------- ----------------
-
---------- -
-------- ----
------- ------------
-
-上面的代码中，我们使用了 &:hover、&:active 和 &:disabled 来分别表示按钮的鼠标悬停、鼠标按下和禁用状态。在 LESS 中，我们还可以使用 &:not 来表示元素的反状态。例如，我们可以使用以下的 LESS 代码来描述一个除第一个子元素外的所有子元素：
li {
&:not(:first-child) {
margin-top: 10px;
}
}上面的代码中，我们使用了 &:not(:first-child) 来表示除第一个子元素外的所有子元素。
总结
LESS 中的选择器语法提供了更加灵活和强大的样式编写方式。通过嵌套选择器和伪类选择器的应用，我们可以更加方便地描述 HTML 元素的层级关系和状态。在实际开发中，我们应该充分利用 LESS 的选择器语法，提高样式编写的效率和质量。
示例代码：https://codepen.io/pen/?template=xxrVrXr
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655821efd2f5e1655d25b0d1