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方法是编写一般案例，然后编写一个更专业的案例，在这种情况下，您将覆盖一般情况：

＆＃13;

/* 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; }

＆＃13;

<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>

＆＃13;

这使用general sibling combinator，以代字号（~）表示。

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

1 个答案: