使用 LESS 扩展 CSS 选择器

什么是 LESS

LESS 是一种 CSS 预处理器语言，它扩展了 CSS 语言，使我们可以使用变量、混合、函数等功能。更重要的是，LESS 可以简化复杂的样式代码，并提高代码的可维护性。

扩展 CSS 选择器

CSS 选择器是用来选择 HTML 元素的一种方法。例如，选择所有元素的选择器是 *，选择 class 为 example 的元素的选择器是 .example。然而，如果我们想要选择更加复杂的元素，如某个父元素下的子元素，通常需要写长长的 CSS 选择器。在这种情况下，LESS 的扩展选择器功能就非常有用了。

父元素选择器

正常的 CSS 选择器只支持选择子元素，但 LESS 支持选择父元素。例如，我们可以使用 & 符号来引用父元素选择器。下面是一个例子：

div {
  &.example {
    background-color: yellow;
  }
}

上面的代码中，我们使用 & 引用了父元素 div 的选择器，这意味着 .example 的选择器实际上是 div.example。这样我们就可以选择一个特定的父元素下的 class 为 example 的元素，并设置背景色为黄色。

兄弟元素选择器

CSS 选择器可以选择相邻的兄弟元素，但不能选择其他的兄弟元素。通过 LESS 的扩展选择器，我们可以选择其他所有的兄弟元素。例如：

input:checked ~ div {
  background-color: yellow;
}

上面的代码中，我们使用了 ~ 符号来选择所有与选择器前面的元素 input:checked 具有相同父元素的 div 元素，并设置背景色为黄色。

通用元素选择器

CSS 选择器中的通配符 * 只能选择所有元素，但 LESS 支持选择所有元素的子元素。例如：

div {
  & * {
    color: red;
  }
}

上面的代码中，我们使用 & 引用了父元素 div 的选择器，这意味着 * 的选择器实际上是 div *。这样我们就可以选择一个特定的父元素下的所有子元素，并设置文字颜色为红色。

总结

LESS 的扩展选择器功能可以帮助我们简化复杂的样式代码，并提高代码的可维护性。主要的扩展选择器包括父元素选择器、兄弟元素选择器和通用元素选择器。通过这些扩展选择器，我们可以在编写样式代码时更灵活地选择元素，并使代码更易于理解和维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c766bb10032fedd391542b