2012-06-15 140 views
3

里面如果你有这样的HTML元素,是不是其他元素

<div> 
    <span class="style-me">i want to be styled</span> 
</div> 
<div class="ignore-my-descendants"> 
    <span class="style-me">i want to be styled but my parent prevents it</span> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

那么这个CSS选择器

.style-me:not(.ignore-my-descendants *) { 
    color: red; 
} 

将不匹配任何东西。也许是因为:not()只接受这里没有给出的简单选择器(我不确定,希望你能告诉我真实的原因)。 是否有一个纯CSS的方式来筛选出那些父母符合给定条件的元素?

编辑:我不想将任何值应用于要忽略的元素。 这很重要,因为无法预见元素的所需display属性值。

+1

正确的,这是因为':不()'只接受简单的选择是CSS3的。 – BoltClock

回答

4

嗯...你正在选择一个孩子,并要求匹配它的父母。将无法正常工作

有一个简单的方法

.style-me { 
    color: red; 
} 

.ignore-my-descendants .style-me { 
     color: white; 
    } 
+0

这个解决方案的问题是我必须为那些我想忽略的人设置样式。当使用像display:none这样的属性时,这会带来很多问题,因为你无法知道元素的前一个值。 也许我的问题应该是“是否有一个选择器来选择那些不在另一个给定元素内的元素” – Conic