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

说你有这样的代码：是否可以根据非同级元素的值设置css规则？

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

是有可能设置notASibling的属性的基础上，这不是一个兄弟元素的类值？例如，在上面的代码中，如果hello> cat类是而不是狗，我可能希望将notASibling的显示属性设置为隐藏。

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

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

来源

2011-08-02 MM.

肯定可能与JavaScript - 但你问的解决方案以外的JavaScript？ – Dave

不能达到纯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 */ 
}

来源

2011-08-02 14:33:41 rcravens

这是不可能的CSS。你唯一真正的选择是使用Javascript。 jQuery库是根据各地使用增强CSS选择器选择元素进行操作的想法，你能做到这一点的位置：

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

来源

2011-08-02 14:31:41 nickf

答案是否定的。自然，你可能会想到结合子组合子和兄弟组合子，即是这样的：

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

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

来源

2011-08-02 14:47:31

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

回答

相关问题