在不使用 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)
...而且我很确定这甚至不会超过一层嵌套(如我的示例)。
有没有一种方法可以做到这一点而不必列出标签的每个排列?
我无法告诉您哪些浏览器(如果有)实现了 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 解决方案。