css - 不在其他元素内的元素

Question

如果你有这个 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无法预见所需的元素属性值。

Answer 1

嗯...您正在选择一个孩子并要求匹配其父母。不会工作

有一个简单的方法

.style-me {
    color: red;
}

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