取消CSS声明

有可能有一个基本上“撤销”先前规则的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: ???;
}

解决方法

单独使用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");
}

这假设“黑色”为外部颜色。如果这个颜色值有变化的话，恐怕就不幸了。除非你可以定义一个能够从上下文中获取颜色值的表达式()(例如检查父元素的其他属性)。或者您放弃使用JS框架，就像其他人已经建议的那样。

无需使用JS的这种简单的解决方案当然是：

td ul.first {
  color: blue;
}

但是我可以看到你为什么要避免这种情况。

原文地址：https://www.jb51.cc/css/218220.html