LESS 是一种动态样式语言，它是 CSS 的扩展，提供了许多有用的特性，其中包括嵌套选择器。嵌套选择器是一个非常有用的特性，可以让您更快速、更方便地编写样式。
嵌套选择器的基本用法
嵌套选择器的基本语法如下：
-- -------------------- ---- -------
--------- -
---------- -------
--------- -
---------- -------
-
--------- -
---------- -------
-
-在上面的代码中，selector1 是包含其他选择器的外层选择器，selector2 和 selector3 是嵌套在 selector1 中的选择器。
嵌套选择器的优点在于，它可以在不增加代码行数的情况下提高代码的可读性。假设您需要为一个元素设置一些样式，您可以在 LESS 中这样写：
-- -------------------- ---- -------
-------- -
------ -----
-- -
---------- -----
-
- -
---------- -----
------------ ----
-------------- -----
-
-在上面的代码中，.article 选择器包含了两个嵌套的选择器 h1 和 p。这样，您就可以更清晰地表达样式的关系。
嵌套选择器的高级用法
除了基本用法外，嵌套选择器还有一些高级用法，可以更进一步提高代码的可读性和灵活性。
& 符号
& 符号可以让您引用父级选择器。例如：
.btn {
background-color: #f00;
&:hover {
background-color: #00f;
}
}在上面的代码中，&:hover 选择器引用了 .btn 选择器，这样就可以更好地表示按钮悬停时的样式。
子组合选择器和兄弟组合选择器
使用子组合选择器和兄弟组合选择器，可以进一步简化代码。例如：
-- -------------------- ---- -------
-- -
-- -
------------- -
------------ -----
-
- -- -
----------- -----
-
-
-在上面的代码中，li:first-child 选择器选择了 ul 中的第一个 li 元素，并为其设置了 padding-top。而 + 符号表示相邻的兄弟元素，即 li 元素之间的间距为 10px。
总结
通过嵌套选择器，您可以更快速、更方便地编写样式，同时提高代码的可读性和灵活性。因此，在编写 LESS 样式时，嵌套选择器是一个必须掌握的技能。在使用嵌套选择器时，您应该注意代码的结构和层级关系，这样才能更好地发挥其优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce01c7b5eee0b5255f61b7