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

【问题标题】：Is it possible to set css rules based on value of non-sibling elements?是否可以根据非兄弟元素的值设置 css 规则？
【发布时间】：2011-08-02 22:47:31
【问题描述】：

假设你有这个代码：

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

是否可以根据非同级元素的类值设置 notASibling 的属性？例如，在上面的代码中，如果 hello > cat 类 not 是狗，我可能想将 notASibling 的显示属性设置为隐藏。

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

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

【问题讨论】：

当然可以使用 javascript - 但您是否需要 javascript 以外的解决方案？

标签： html css css-selectors

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

答案是否定的。自发地，您可能会考虑组合子组合器和兄弟组合器，即像这样：

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

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

【讨论】：

【解决方案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 */
}

【讨论】：