在嵌套元素中切换 CSS 属性

Question

在不使用 Javascript 的情况下，有没有办法通过嵌套元素打开和关闭 CSS 属性。

我试图解决的问题是，我有许多标签和类，它们使一些文本斜体（<em>, <blockquote>, <cite>, <q>, <dfn>, 和其他一些类），当其中一个在其中另一个中时，斜体化需要切换。

<块引用>
    所以那个人说，<q>那不是来自<cite>麦田里的守望者</cite>，亲爱的
    伙计！</q>，你能相信吗？！
</blockquote>

应该呈现为：

于是那人说： “这不是麦田里的守望者，亲爱的！” ， 你相信吗？！

我为此得到的 CSS 有点乱：

q, em, dfn, cite, blockquote {
    font-style: italic;
}
q q, q em, q dfn, q cite,
em q, em em, em dfn, em cite,
dfn q, dfn em, dfn dfn, dfn cite,
cite q, cite em, cite dfn, cite cite,
blockquote q, blockquote em, blockquote dfn, blockquote cite {
    font-style: normal;
}

...而且我很确定这甚至不会超过一层嵌套（如我的示例）。

有没有一种方法可以做到这一点而不必列出标签的每个排列？

Answer 1

我无法告诉您哪些浏览器（如果有）实现了 CSS3:not伪类，但如果我们看到它有时受支持，那么我们似乎可以这样做：

q:not(q, em, dfn, 引用, 块引用),
em:not(q, em, dfn, 引用, 块引用),
dfn:not(q, em, dfn, 引用, 块引用),
引用:not(q, em, dfn, 引用, 块引用),
blockquote:not(q, em, dfn, cite, blockquote) { 字体样式: 斜体; }

任何人都可以猜测浏览器在执行此操作时将如何实现这一点，因此它的工作深度可能不会超过 2 层（就像您的示例）。

除此之外，不幸的是我想不出另一个纯 CSS 解决方案。