如何在兄弟姐妹不在时选择一个元素？

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>

这使用了一般的兄弟组合子,用波浪号(~)表示.