css - 如何简化这些 CSS 选择器？

Question

我有一些代码我认为可能很庞大并且可以简化。我还没有找到任何对我的情况有帮助的东西。我试图做到这一点，以便当我将鼠标悬停在 div 上时，h2 和 p 会带有下划线。它像这样工作得很好:

.test:hover h2, .test:hover p {
  text-decoration: underline;
}

但我想知道是否可以通过某种方式简化它，而不必重复 .test:hover 两次。

Answer 1

如果您不需要支持 Internet Explorer，这可以通过 :is pseudo-class 来实现。 :

.test:hover :is(h2, p) {
  text-decoration: underline;
}

<div class="test">
  <h1>An H1</h1>
  <h2>An H2</h2>
  <p>A paragraph</p>
</div>

另一种方法是利用像 Sass 或 Less 这样的 CSS 预处理器，它们都支持嵌套，这可以使 DRY-er 的源代码更具表现力。不过，这在您的情况下可能有点矫枉过正。这是 Sass 的 SCSS 格式的示例:

.test:hover {
  h2, p {
    text-decoration: underline;
  }
}