LESS 是一种 CSS 预处理器，它提供了一些方便的语法和功能，能够简化 CSS 的编写和维护。其中一个常用的功能是设置 CSS class 的后代选择器，能够让我们更方便地编写层次结构复杂的 CSS 样式。
LESS 中的后代选择器
通过 LESS 的嵌套语法，我们可以使用后代选择器来设置 CSS class 的样式。比如：
-- -------------------- ---- -------
------- -
------ -----
------ -
---------- -----
------- -
------ ----
-
-
-上面的代码中，.child 是 .parent 的后代选择器，它可以继承 .parent 的样式，并添加自己的样式。同时，它还定义了一个 &:hover 的伪类，用来设置 .child 在鼠标悬浮时的样式。
这样一来，我们就可以更方便地编写复杂的样式，而无需写一大堆的选择器。
示例代码
下面是一个更为复杂的示例，展示了如何使用后代选择器来设置深层次的 CSS 样式：
-- -------------------- ---- -------
----- -
---------- -----
-- -
-------- -----
---------------- -
----------------- --------
-
------ -
---------- -----
------- -
---------------- ----------
-
-
-------- -
----------- -----
- -
------------ ----
-
-
----- -
---------- -----
------ -----
-
-
-上面的代码定义了一个列表样式，其中每个 li 元素都包含了标题、内容和元数据。通过嵌套使用后代选择器，我们可以很方便地设置各个元素的样式，并且可以根据需要添加伪类或子元素的样式。
总结
在 LESS 中设置 CSS class 的后代选择器是一项非常实用的功能。通过这种方式，我们可以更为方便地定义 CSS 样式，并且可以避免写一大堆的选择器。当我们需要编写具有复杂层次结构的 CSS 样式时，使用后代选择器能够显著提高我们的工作效率。
希望本文对您有所帮助，如果有疑问或意见，欢迎留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5b1e3add4f0e0ffe72309