css - 在链接上继承颜色和下划线颜色

Question

我在将绿色应用于 a 内的 anchor 元素 ( #container ) 时遇到问题.

在这个 fiddle 中:

http://jsfiddle.net/lasseedsvik/DnhHb/2/

HTML

<p>
    <a href="">Green</a>
</p>

<div id="container">
<p>
    <a href="">Green also</a>
</p>
<p>
    <div><div><a href="">Also Green</a></div></div>
</p>
<p>
    <h3><a href="">Red</a></h3>
</p>
<p>
    <span style="color:yellow"><a href="">Yellow</a></span>
</p>
</div>

CSS

* {
    font-size: inherit;
}

a {
    color: green;
}

#container a {
    color: inherit;
    font-size: inherit;    
}

p {
    font-size: 18px;
}

h3 {
    color: red;
    font-size: 28px;
}

我已经通过在 #container a 上使用继承属性设法接近了但问题是第二个和第三个链接不会“退回到”绿色。

我原来的问题在这里几乎已经解决了，那个链接有 <h2>或其他不同于绿色但始终具有绿色文本装饰的颜色。

容器中的内容是由所见即所得编辑器生成的，因此我对其内容没有太多控制权。

Answer 1

原来的问题是这样的:

通过指定以下 CSS:

a { color: green; }
#container a { color: inherit; }

OP 希望为 <a> 使用默认的绿色元素，除非其祖先具有固定颜色，在这种情况下 <a>元素应该继承。

<a> was colored green
<.. id="container"> <*> <a> was colored black
<h3 style="color: red"> <a> should be colored red
<span style="color: yellow"> <a> should be colored yellow.

问题是第二个<a>上面应该是绿色，而不是黑色。它呈现为黑色的原因是因为不存在具有未定义颜色的 HTML 元素，因为浏览器的默认 CSS 添加了一种计算样式，使其变成黑色。

OP 最初想要的可以命名为Selective CSS Inheritance，经过大量研究，目前的 CSS 实现似乎不可能。

如果 CSS 实现类似于 inherit 的关键字/属性值，则可以轻松完成上述操作，可能称为 inherit-user-defined ，它只会从用户设置的、非浏览器设置的样式继承值。

我知道这实际上并没有回答问题，但我认为这对搜索此问题的读者很有用，因为这个问题的公认答案对我们中的一些人来说是出乎意料的。