css - 当没有同级时如何选择元素？

Question

我有这样的结构:

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
    <div class="child-4"></div>
    <div class="child-5"></div>
</div>

我只想在 .child-4不是同一父代的子代的情况下定位 .child-2，而不知道子代的顺序，但是 .child-2永远不会在 .child-4之后。

Answer 1

解决此类问题的经典CSS方法是先编写一个普通案例，然后编写一个更特殊的案例，在这种情况下，您将覆盖该普通案例:

/* case where there may or may not be a preceding child-2 */
.child-4            { color: red; }

/* case where there IS a preceding child-2 */
.child-2 ~ .child-4 { color: inherit; }

<div class="parent">
    <div class="child-1">child1</div>
    <div class="child-2">child2</div>
    <div class="child-3">child3</div>
    <div class="child-4">child4</div>
    <div class="child-5">child5</div>
</div>

<br/>

<div class="parent">
    <div class="child-1">child1</div>
    <div class="child-3">child3</div>
    <div class="child-4">child4</div>
    <div class="child-5">child5</div>
</div>

这使用由波浪号( ~)表示的 general sibling combinator。