：父级有多个类名

Question

使用 React 与渲染以下结构的组件：

<div class="top-layout horizontal">
  <section class="first"></section>
  <section class="second"></section>
  <section class="third"></section>
</div>

每个元素都是它们自己的组件，并且具有唯一的类名。当父元素添加

horizontal

类名时，我想更新部分元素

first

的显示方式。鉴于当前的 CSS 设置，我必须处理我无法简单地做

.top-layout.horizontal > .first {
  background-color: blue;
}

我尝试从这里实现解决方案有CSS父选择器吗？但它似乎不起作用。 有人发现选择器的设置有什么问题吗？

.top-layout {
  background-color: green;

  &.horizonal {
    background-color: yellow;
  }
}

.first {
  background-color: red;
}
.first:has(> .horizonal) {
  background-color: blue;
}

Answer 1

你搞反了：

.horizontal:has(> .first) {
    background-color: blue;
}

您想要做的是选择

.first

的父级，对吗？所以你需要说“选择.horizontal，它是first的父级”或“其中.horizontal里面有.first”。因此，它选择父级。