Question

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

我正在尝试解决的问题是，我有许多标记和类，这些标记和类使一些文本斜体（<em>，<blockquote>，<cite>，<q> ，<dfn>和其他一些类，当其中一个在其中一个内部时，斜体化需要切换。

<blockquote>
    And so the man said, <q>That's not from <cite>Catcher In The Rye</cite>, dear
    fellow!</q>, can you believe that?!
</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, 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 2

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

Answer 3

CSS3中可以使用简单的解决方案：

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

Answer 4

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

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

我的建议是：

假设你的标记是有原因的，所以保持样式不变。嵌套在blockquote中的重点应始终具有其祖先元素的样式，因为这种嵌套有一个原因，不应该以可视方式为用户隐藏
查看文档的要求，看看你是否真的想要这样的嵌套。如果没有，一般的HTML编辑器可能不足以满足您的需求，您最好使用一种xml格式，该格式可以验证某种模式，在您的情况下，该模式会禁止某些模式在其他模式中使用。然后使用xml编辑器（如Xopus或XmlSpy）编辑文档。

很抱歉，如果这不是您问题的直接解决方案，但我希望能够为您提供另一个解决问题的方法，并且可能会发现可能根本没有问题。祝你好运！

在嵌套元素中切换CSS属性

4 个答案: