CSS 允许穿透

引言

在 CSS 中，经常会遇到需要选择特定元素的情况，有时候只能依靠祖先元素或父元素的类名来进行选择。然而，当我们需要选择父元素内部的一个特定元素而不是直接子元素时，CSS 并没有提供一种简单的选择器来实现这个功能。

假设我们有以下 HTML 结构：

<div class="parent">
  <div class="child">Child Element</div>
</div>

如果我们想要选择 .child 元素，并且只有在其父元素 .parent 内，我们无法使用 CSS 来直接选择这个元素。

传统解决方案

在过去，为了实现这个功能，我们需要使用 JavaScript 或其他脚本语言来操作 DOM，通过添加类名或其他属性来达到选择标的元素的目的。

<div class="parent">
  <div class="child special">Child Element</div>
</div>

<script>
  const parentElement = document.querySelector('.parent');
  // 为特定的子元素添加一个类名
  parentElement.querySelector('.child').classList.add('special');
</script>

然后使用 CSS 来选择带有特定类名的元素：

.parent .child.special {
  /* 样式规则 */
}

上述解决方案需要使用 JavaScript，可能会增加额外的工作量，并且可能会在性能上有一些损耗。然而，现在有一种更简单的方式来实现这个需求，即 CSS 允许穿透。

CSS 允许穿透

CSS 允许穿透是一种 CSS 预处理器（例如 SASS 或 LESS）的功能，在编译为 CSS 代码时，可以让选择器穿透父级元素直达目标元素。

SASS 中的穿透选择器

在 SASS 中，我们可以使用 & 符号来表示自身元素的引用，在选择器中进行嵌套。通过在选择器中使用 & 符号，我们可以创建一个与父级选择器的类名相结合的选择器。

以下是在 SASS 中使用穿透选择器的示例：

.parent {
  background-color: #f0f0f0;

  .child {
    font-weight: bold;

    &__special {
      color: red;
    }
  }
}

编译为 CSS 后的结果为：

.parent {
  background-color: #f0f0f0;
}

.parent .child {
  font-weight: bold;
}

.parent .child__special {
  color: red;
}

通过在 .child 选择器内部使用 & 符号，我们得到了 .parent .child__special 这个选择器，实现了对带有特定类名的子元素的选择。

LESS 中的穿透选择器

LESS 也支持类似的穿透选择器语法，使用 & 符号引用自身，在选择器中进行嵌套，并通过 :extend 关键字来继承父级选择器的样式。

以下是在 LESS 中使用穿透选择器的示例：

.parent {
  background-color: #f0f0f0;

  .child {
    font-weight: bold;

    &__special {
      color: red;
      &:extend(.parent .child) {}
    }
  }
}

编译为 CSS 后的结果与 SASS 的结果相同：

.parent {
  background-color: #f0f0f0;
}

.parent .child {
  font-weight: bold;
}

.parent .child__special {
  color: red;
}

通过使用 LESS 中的 :extend 关键字，我们可以将 .parent .child 的样式继承给 .parent .child__special，从而实现了对特定子元素的选择。

总结

CSS 允许穿透是一种使用 CSS 预处理器（如 SASS 或 LESS）来实现选择器穿透父级元素直达目标元素的功能。通过在选择器中使用 & 符号，我们可以创建一个与父级选择器的类名相结合的选择器，轻松地选择特定的子元素。这种功能可以明显减少对 JavaScript 特定操作的需求，提高代码的可维护性和可读性。

无论是在 SASS 还是 LESS 中，穿透选择器的使用方式都很相似，只需注意不同预处理器的语法差异即可。