用于检查元素存在并应用于第一个元素的CSS

提问者：小点点

给定以下HTML，我希望能够将CSS应用于.first元素，其中.second存在。我知道:has目前不可用，理想情况下我不想使用JavaScript。

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

我想:has的CSS应该在下面。我是否可以应用任何其他CSS来在不使用:has的情况下实现此功能。

.container > .first:has(+ .second) {
  // styles here
}

如果.second不存在，则不应应用CSS样式。

共1个答案

匿名用户

在您的简单示例中，您可以使用:not()，例如

.container > .first:not(:only-child) {
     // styles
}

对于更复杂的场景，你可能需要更多的创造力，但希望这能给你一个主意。