Question

说你有这段代码：

<div class="hello">
    <div class="cat dog"/>
</div>
<div class="notASibling" />

是否可以根据不是兄弟元素的元素的类值设置notASibling的属性？例如，在上面的代码中我可能想要将notASibling的display属性设置为hidden，如果你好＆gt;猫类不是狗。

如果notASibling是“猫狗”的兄弟姐妹，我可以简单地说：

.cat:not(.dog) ~ .notASibling{ display:none; }

Answer 1

这在CSS中是不可能的。这里唯一真正的选择是使用Javascript。 jQuery库基于使用增强的CSS选择器来选择操作它们的元素的想法，你可以在这里做到：

prevWasADog = $(".notASibling").prev().children('.cat').eq(0).is('.dog');

Answer 2

答案是否定的。自发地，你可能会想到组合儿童组合子和兄弟组合子，就像这样：

.notASibling ~ .hello > .cat:not(.dog) { display: none }

但是这是不可能的，因为在CSS 3选择器定义（http://www.w3.org/TR/css3-selectors/）中，选择器可能只使用具有“简单选择器序列”的组合器作为其操作数，而不是其他选择。因此，如果你遵循W3C的语法规则，你只能在选择器中使用一个组合器。

Answer 3

你无法在纯CSS中找到非兄弟姐妹。你可以用JavaScript做到这一点。如果您想要一个纯CSS解决方案，请考虑重构您的DOM。也许是这样的：

<div class='dog'>
    <div class='hello'>
        <div />
    </div>
    <div class='notASibling' />
</div>


.cat div.notASibling {
    /* special styles for cats */
}
.dog div.notASibling {
    /* special styles for dogs */
}

是否可以根据非兄弟元素的值设置css规则？

3 个答案: