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

我在将绿色应用于

#容器中的锚元素（
a
）时遇到问题

在这把小提琴中：


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>

我在
#container a
上使用了inherit属性，但问题是第二和第三个链接不会“退回”到绿色

我最初的问题几乎在这里解决了，那就是链接有
或其他不同于绿色的颜色，但总是有绿色的文本装饰

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

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

看到这个了吗

使用

检查这个

我刚刚从
容器a
类中删除了
颜色：inherit
，添加此css:

#container p a {
    color: green;
}

#container div a {
    color: green;
}

#container span a {
    color: yellow;
}

现在删除内联css，因为它不是必需的

原因：因为您告诉它继承，所以您需要显式声明每个实例，即您需要说
#container pa
需要为绿色

请参见“修复”：

另请参阅更好的格式化版本：
最初的问题是这样的：

通过指定以下CSS：

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

OP希望
元素有一个默认的绿色，除非它的祖先有一个设置的颜色，在这种情况下
元素应该继承

<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.

是绿色的
它的颜色是黑色的
应该是红色的
应该是黄色的。

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

OP最初想要的可以命名为选择性CSS继承，这在经过大量研究后，在当前的CSS实现中似乎是不可能的

如果CSS实现了一个类似于
inherit
的关键字/属性值，可能称为
inherit user defined
，该关键字/属性值只从用户集、非浏览器集样式继承值，那么上述操作就很容易实现

我知道这实际上并不能回答这个问题，但我认为这对搜索这个问题的读者来说是有用的，因为这个问题的答案对我们中的一些人来说是出乎意料的。
这将使所有链接都变成绿色。它们应该继承颜色，并且文本装饰的颜色相同。您将希望显示演示问题的代码，而不是问题本身没有表现出来的测试用例。我认为问题是因为
inherit
从父级继承颜色，而在本例中
#container
没有指定颜色。尝试将
颜色：绿色
添加到
#容器
。对于红色链接和黄色链接，它们各自的父母都有指定的颜色。我的ans@KarSho发生了什么事？你是说发生了什么事？它还在那里…？@哈利，是的。既然你接受了这一点。。你基本上只是想用更具体的选择器来回答？以及
的用法！重要信息
？据我所知，OP希望它在所见即所得编辑器中工作，内容结构未知，而不是添加所有可能的元素组合和
。@JoshC和mavrosxristoforos:+1，正准备发布同样的内容。根据问题所述，这看起来不是一个可行的解决方案。但是，当OP接受后，我想我们就只能这样了。@Harry Yea-这从技术上来说并不能回答这个问题-尽管这不是一个很好的问题。这和KarSho的答案有什么不同吗？@mavrosxristoforos nothing。没有变化，是吗？？？我注意到了，伙计……这是我的答案。答案总是一样的，因为它的解决方案是一个。这会使最后一个
（在
中）变成绿色。
a { color: green; }
#container a { color: inherit; }

<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.