Question

我在a中将绿色应用于锚元素#container）时遇到问题。

在这个小提琴中：

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上的inherit属性来解决问题，但问题是第2和第3个链接不会“退回”到绿色。

我在这里几乎解决的原始问题是，<h2>或其他颜色与绿色不同但总是有绿色文字装饰的链接。

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

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最初想要的名称可以命名为选择性CSS继承，经过大量研究后，目前的CSS实现似乎无法实现。

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

我知道这实际上并没有回答这个问题，但我认为对于那些会搜索这个问题的读者会有用，因为我们中的一些人对这个问题的接受答案是出乎意料的。

Answer 2

只需删除

的规则即可

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

Answer 3

请参阅此link

使用

* {
    font-size: inherit;
}

a {
    color: green;
}

#container a {

}

p {
    font-size: 18px;
}

h3 a{
    color: red;
    font-size: 28px !important;
}
span a{
    color: yellow;
}

Answer 4

选中此http://jsfiddle.net/DnhHb/5/

我刚从color:inherit班级

中删除了Container a

Answer 5

添加此css：

#container p a {
    color: green;
}

#container div a {
    color: green;
}

#container span a {
    color: yellow;
}

现在删除内联css，因为它不需要。

原因：既然你告诉它要继承，你需要明确声明每个实例，即你需要说#container p a需要是绿色的。

看到它修复： http://jsfiddle.net/DnhHb/6/

另请参阅更好的格式化版本： http://jsfiddle.net/DnhHb/9/

继承链接上的颜色和下划线颜色

5 个答案: