在嵌套元素中切换 CSS 属性

nic*_*ckf 5 css

在不使用 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;
}
Run Code Online (Sandbox Code Playgroud)

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

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

Eri*_*lin 2

我无法告诉您哪些浏览器(如果有)实现了 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 解决方案。