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;
    }