LESS 是一种 CSS 预处理器，它能够让我们在编写 CSS 时，使用变量、函数、混合、选择器等语法特性，使得我们的代码更加模块化和易于维护。在 LESS 中，我们可以使用选择器和伪类来进一步控制样式的细节。这篇文章将深入探讨 LESS 中如何使用选择器和伪类。
一、 LESS 中的选择器
在 LESS 中，选择器可以继承、嵌套和组合使用，从而使得我们的代码更加灵活，下面是一些 LESS 中常用的选择器：
- 类选择器
看下面的例子：
.button {
...
}在 CSS 中，我们通常使用 "." 来表示类选择器，同样在 LESS 中也可以这么写。
- id 选择器
看下面的例子：
#header {
...
}在 CSS 中，我们通常使用 "#" 来表示 id 选择器，同样在 LESS 中也可以这么写。
- 后代选择器和子元素选择器
看下面的例子：
#header h1 {
...
}在 CSS 中，我们通常使用 "空格" 来表示后代选择器，而在 LESS 中我们可以直接嵌套写。
ul > li {
...
}在 CSS 中，我们通常使用 ">" 来表示子元素选择器，而在 LESS 中我们也可以直接嵌套写。
- 通配符选择器
看下面的例子：
* {
...
}在 CSS 中，我们通常使用 "*" 来表示通配符选择器，同样在 LESS 中也可以这么写。
- 伪类选择器
看下面的例子：
a:hover {
...
}在 CSS 中，我们通常使用 ":" 来表示伪类选择器，同样在 LESS 中也可以这么写。
二、 LESS 中的伪类
伪类可以为元素添加特殊的状态和样式，常用的伪类如下：
- hover
看下面的例子：
a:hover {
...
}当用户鼠标悬停在超级链接上时，链接将应用这个样式。
- active
看下面的例子：
input:active {
...
}当用户点击一个 input 元素时，元素将应用这个样式。
- focus
看下面的例子：
input:focus {
...
}当用户将焦点放在一个 input 元素上时，元素将应用这个样式。
- visited
看下面的例子：
a:visited {
...
}当用户点击过一个链接后，链接将应用这个样式。
- first-child 和 last-child
看下面的例子：
li:first-child {
...
}
li:last-child {
...
}当 li 元素是其父元素的第一个或最后一个子元素时，元素将应用这个样式。
- nth-child(n)
看下面的例子：
ul > li:nth-child(even) {
...
}当 li 元素是其父元素的第偶数个子元素时，元素将应用这个样式。当 n 为 odd 时，表示奇数；当 n 为 even 时，表示偶数。同时也可以使用具体的数字值。
总结：
选择器和伪类是 CSS 样式表中重要的部分，LESS 的选择器语法更加灵活和可读性更高，在实际开发中应用广泛。在使用时，我们应该尽量保持简洁和可维护性，避免不必要的重复和冗余代码。同时，我们也应该注重学习和实践，掌握更多的技能和技巧，从而提高自己的前端水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffdca195b1f8cacde239de