是否有可能匹配第一级非直接后代？

Question

我想要一个特定的CSS规则将仅应用于section元素中.body元素的第一级，无论它们有多深层嵌套。< / p>

例如，如果给定的层次结构类似于： .body -> div -> section.a -> div -> section.b然后我希望我的样式仅适用于section.a。

同样适用于 .body -> section.a -> div -> section.b
.body -> footer-> div -> section.a -> div -> section.b
等

是否可以在CSS中执行此操作，而无需在元素上设置类？ 到目前为止，我无法找到任何可能的迹象。

Answer 1

使用子选择器：

.body > div > section

Answer 2

没有css选择器支持你想要的东西，但是你可以用这个来实现同样的目标：

假设您的所有部分都有默认的红色，那么您只需要第一级非直接部分元素为蓝色

.body section {
  background-color: blue;
}

Ups，但这将使所有部分后代变为蓝色。 要解决此问题，请在每个第一部分后代恢复该操作：

.body section section {
  // make every one else (that's not the first descendant) red again.
  background-color: red;
}

希望你的情况不会太麻烦。