什么是 LESS
LESS 是一种 CSS 预处理器，它扩展了 CSS 语言，使其能够使用变量、函数、运算符等高级特性，让样式表更加简洁、易于维护和重用。LESS 的语法和 CSS 相似，但它可以编译成普通的 CSS，兼容所有的浏览器。LESS 支持面向对象的 CSS 编写方式，使得样式表更加模块化，易于扩展和修改。
选择器组合是什么
在编写样式表时，我们通常使用选择器来指定一个或多个 HTML 元素的样式。选择器可以是标签名、类名、ID、属性等，在 CSS 中有多种选择器类型。但在实际运用中，常常需要同时满足多个条件才能选择到目标元素，这时就需要用到选择器组合。
选择器组合是将多个简单选择器组合在一起，用以指定更为具体的选择范围。例如：div > p 表示选择所有 div 直接子级中的 p 元素，.box p 表示选择所有 class 为 box 的元素下的 p 元素。
在 LESS 中，可以使用嵌套和父元素选择器来方便地组合选择器，使得样式表更加清晰易懂，避免了层层嵌套和重复书写的问题。
嵌套选择器
LESS 中的嵌套选择器可以将多个选择器嵌套在一起，使样式表代码更加具有结构化和层次感。嵌套选择器有两种形式：子元素选择器和后代选择器。
子元素选择器
子元素选择器使用 > 符号来表示，其作用是选择某个元素下的直接子元素，即只包含一级子元素，而不包括更深层次的子元素。
例如，想要设置某个 class 为 container 的 div 元素中 class 为 box 的子元素的样式，可以这样写：
-- -------------------- ---- -------
---------- -
----------------- --------
---- -
---------- -----
- -
------- -----
----------- -------
-
-
-这里，我们使用了嵌套选择器 .container .box，指定了一个 class 为 container 的元素中拥有一个 class 为 box 的子元素，然后在 .box 的基础上再使用了嵌套选择器 p，指定了 p 元素的样式。这样做可以使得样式表更加易读，同时也减少了样式表的冗余。
后代选择器
后代选择器使用空格符号来表示，其作用是选择某个元素下的所有后代元素，即包括一级子元素、二级子元素、三级子元素等等。
例如，想要设置网页中所有段落元素（p）的样式，可以这样写：
body {
font-family: Arial, sans-serif;
p {
font-size: 16px;
line-height: 1.5em;
color: #333333;
}
}在这个例子中，我们使用了嵌套选择器 body p，指定了网页中所有段落元素的样式。需要注意的是，后代选择器会匹配所有符合条件的元素，因此如果样式表存在大量的选择器组合，会导致样式表的渲染速度变慢，影响用户体验。
父元素选择器
父元素选择器用 & 符号表示，可以将父元素的选择器插入到子元素的选择器中，以实现复杂的样式表指定。父元素选择器通常在某个 pseudo-class 中使用，如:hover 或:focus，它可以让我们避免重复定义类似的样式。
例如，想要对输入框在获得焦点时设置边框变色的效果，可以这样写：
input {
border: 1px solid #ccc;
&:focus {
border-color: #6699ff;
}
}这里，我们使用了父元素选择器 &，它将父元素 input 的选择器插入到了子元素的:focus 伪类中，使得样式表更加简洁易懂。
组合选择器
组合选择器是将多个选择器连结在一起，以选取符合这些选择器所有条件的元素。组合选择器有两种形式：并集选择器和交集选择器。
并集选择器
并集选择器使用逗号（,）分隔多个选择器，以选取同时符合这些选择器条件的所有元素。
例如，想要对网页中所有 class 为 box 和 class 为 container 的元素设置边框样式，可以这样写：
.box, .container {
border: 1px solid #ccc;
}这里，我们使用了并集选择器 .box, .container，将两个选择器连结在一起，使得两个 class 的元素都拥有了相同的边框样式。
交集选择器
交集选择器使用空格符号分隔多个选择器，以选取同时符合这些选择器所有条件的父元素，并对其子元素进行样式指定。
例如，想要对某个 class 为 container 的元素中 class 为 box 的子元素设置背景色和边框样式，可以这样写：
.container {
background-color: #f2f2f2;
&.box {
border: 1px solid #ccc;
background-color: #ffffff;
}
}这里，我们使用了交集选择器 .container.box，它表示选择一个 class 为 container 的元素中同时有 class 为 box 的元素，然后在 .container 的基础上再使用了父元素选择器 &，指定了这个元素及其子元素的样式。
总结
以上是如何用 LESS 选择器组合提高样式表的可读性的介绍。在实际应用中，采用 LESS 选择器组合可以使样式表更加清晰易读，同时也降低了样式表的冗余度。掌握 LESS 选择器组合可以使前端开发更加高效，也有助于培养良好的代码习惯。如果想要深入了解 LESS 的用法，可以多尝试一些具体的样式表编写问题，积累经验，提高技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64565970968c7c53b0985770