Question

是否有可能有一个基本上“撤消”先前规则的CSS规则？

一个例子：

<blockquote>
    some text <em>more text</em> other text
</blockquote>

让我们说这是CSS：

blockquote {
    color: red;
}

...但我希望<em>保持正常的文字颜色（你可能不一定知道）。

基本上，有没有办法做这样的事情？

blockquote em {
    color: inherit-from-blockquote's-parent
}

编辑：我实际上试图让它工作的代码实际上有点复杂。也许这会更好地解释它：

This text should be *some unknown colour*
<ul>
    <li>This text should be BLUE
        <ul>
            <li>Same as outside the UL</li>
            <li>Same as outside the UL</li>
        </ul>
    </li>
</ul>

ul {
    color: blue;
}
ul ul {
    color: ???;
}

Answer 1

仅使用CSS，您无法引用父母的父母。

您可以尝试混合使用特定的CSS选择器和标记，以便显示所需的效果。

<td>
  This is the enclosing element.
  <ul>
    <li>This is the first level UL, direct child of TD
      <ul>
        <li>This is the second level UL</li>
        <li>Same as outside the UL</li>
      </ul>
    </li>
  </ul>
</td>

CSS：

td > ul
  color: blue; /* this affects the "direct child" UL only */
}

您可以将样式继承的深度限制为一个级别，因此内部UL在颜色方面没有样式，并从封闭文本中进行设置。

详细了解CSS Child Selector，请注意旧浏览器可能会对它们产生怪癖。

修改

对于Internet Explorer 6，子选择器可以在某种程度上伪造。使用前请务必系好安全带（条件评论等）：

td ul { color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black"); }

这假设“黑色”作为外部颜色。如果这个颜色值可能会发生变化，那我就不幸了。除非您可以定义能够从上下文中获取颜色值的expression()（例如，检查父元素的其他属性）。或者你放弃并使用JS框架，正如其他人已经建议的那样。

无需使用JS的狡猾解决方案当然是：

td ul.first { color: blue; }

但我明白为什么你要避免这种情况。

Answer 2

使用此选项可确保继承覆盖可能设置颜色的其他内容：

blockquote em {
    color: inherit !important;
}

Answer 3

放弃并使用一段javascript来检测父级的样式并设置它？：）

Answer 4

我建议您为选择器及其祖父母提供字体颜色的共享声明，而不是试图强制选择器从其祖父母继承字体颜色。

以blockquote为例，假设身体是祖父母：

body, blockquote em {
       color:[whatever];
}


blockquote {
       color:red;
}

对于无序列表，它将是：

body, ul ul {
       color:[whatever];
}


ul {
       color:blue;
}

Answer 5

好的，带有示例的附加文字很清楚地解释了这个问题。而且我很害怕你想要的东西是不可能的。

如果您知道“未知颜色”，您当然可以重复颜色。但我认为CSS需要一些机制来添加变量或引用。

所以你必须坚持不懈：

ul {
  color: blue;
}
li ul {
  color: sameenvironment;  /* Sorry but you have to add the specific colour here */
}

Answer 6

我的CSS有点生疏，但这应该有效：

blockquote {
    color: red;
}

blockquote em {
    color: inherit;
}

您正在将blockquotes设置为红色，但是blockquote中包含的所有<em>'s都应该继承......嗯，它们是从周围文本继承还是从块引用继承？

如果上述方法无法正常工作，那么我认为没有办法用当前的标记来实现。您必须使用其他标记，或明确设置颜色，例如

blockquote em {
        color: Purple;
}

Answer 7

如果你可以改变你的HTML，你可以尝试

<li><span>This text should be BLUE</span>
    <ul>
        <li>Same as outside the UL</li>
        <li>Same as outside the UL</li>
    </ul>
</li>

和风格

li span{
    color: blue;
}

EDIT 另一种方法是在没有额外span标记的情况下完成此任务：

如果我们假设我们有一个样式类（或任何其他选择器）定义为外部ul的父类。我们可以像这样修改css：

.parentStyle,
.parentStyle li li{
     color:red;
}
li{
     color:blue;
}

Answer 8

我也有这个问题，但是在我看了一眼其他答案后，它就打击了我，

    body {
        color : initial;
    }

IE目前还不支持这个，Gecko需要-moz-initial我相信..

    body {
        color : unset;
    }

现在还没有得到支持。我只是觉得我和其他想到这个的人分享了我的答案。

取消CSS声明

8 个答案: