在嵌套元素中切换 CSS 属性

Question

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

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

于是那个人说，那不是来自麦田里的守望者，亲爱的 伙计！，你能相信吗？！

应该呈现为：

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

为此我得到的 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

我会使用一个脚本来管理它，该脚本为每个排列生成必要的嵌套规则。这是我不会发疯维护它的唯一方法。

Answer 2

我无法告诉你哪些浏览器（如果有的话）实现了 CSS3 :not 伪类，但如果我们看到它在某个时候得到支持，似乎我们可以做到：

q:not(q, em, dfn, cite, blockquote), em:not(q, em, dfn, cite, blockquote), dfn:not(q, em, dfn, cite, blockquote), cite:not(q, em, dfn, cite, blockquote), blockquote:not(q, em, dfn, cite, blockquote) { font-style: italic; }

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

除此之外，很遗憾我想不出另一种纯 CSS 解决方案。

Answer 3

你说你有各种各样的元素需要显示为斜体，但是一旦嵌套它们就需要打破以前的斜体。请原谅我这么说，但我真的想知道是否真的应该想要这样的行为。

请允许我解释一下：您有不同的标记，例如引号、引文、强调等。当嵌套使用时，引号内的强调应该与在引号外使用时具有不同的含义。因此，默认的 css 规则适用于下面的所有内容。因此，我不理解将有意义的嵌套标记展平为斜体和非斜体的愿望，因为它隐藏了手头内容的潜在含义（因为类似的格式将应用于文档的不同有意义的部分）。

我的建议是：

• 假设您的标记存在是有原因的，所以保持样式不变。嵌套在块引用中的强调应始终具有其祖先元素的样式，因为这种嵌套是有原因的，并且不应以视觉方式为用户隐藏
• 检查文档的要求，看看您是否真的想要这样的嵌套。如果没有，通用 HTML 编辑器可能不足以满足您的需求，您可能最好使用验证特定模式的 xml 格式，在您的情况下，该模式将禁止在其他模式中使用某些元素。然后使用 Xopus 或 XmlSpy 等 xml 编辑器来编辑您的文档。

很抱歉，如果这不是您问题的直接解决方案，但我希望能够为您提供另一种看待问题的观点，也许可以看到可能根本没有问题。祝你好运！

Answer 4

在 CSS3 中有一个简单的解决方案：

em {
    font-style: toggle(italic, normal);
}