parent 内 class 的所有 children 与兄弟姐妹

Question

如果 parent 有某个 class 的兄弟姐妹，我有 css 目标 parent 的 child;

.sibling + .parent > [class^='child'] { style }

导航

-sibling
-parent
    -child1           <-- styled
    -child1           <-- styled
         -child2      <-- not styled

这对第一层的所有 children 都很好，但我也想针对所有 grandchildren，曾祖 children 等

我不想用

.sibling + .parent > [class^='child'],
.sibling + .parent > [class^='child'] > [class^='child'],
.sibling + .parent > [class^='child'] > [class^='child'] > [class^='child'] { 
    style 
}

因为这仍然只限制了几个级别。如何将其更改为无限制？

Answer 1

要么指定元素 div，它将定位其余的子 div：

.parent + .sibling > [class^='child'] div { style }

或使用星号 * 定位所有子元素，而不考虑其标签。

.parent + .sibling > [class^='child'] * { style }

Answer 2

这就是后代组合器的用途——它以后代为目标，而不考虑嵌套级别：

.sibling + .parent [class^='child']

（正是因为这个原因，"child" 对于您定位的元素来说是一个糟糕的名称，但我假设它只是为了说明。）

parent 内 class 的所有 children 与兄弟姐妹

All children of class within parent with sibling

css

css-selectors