0

我在将绿色应用于 . 内的锚元素 ( 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但问题是第二个和第三个链接不会“回退”到绿色。

我最初的问题在这里几乎解决了，链接具有<h2>或其他颜色与绿色不同但始终具有绿色文本装饰。

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

4

5 回答 5

2

原来的问题是这样的：

通过指定以下 CSS：

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

OP 希望<a>元素具有默认的绿色，除非它的祖先有一个 set color，在这种情况下<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，它只会从用户设置的非浏览器设置的样式中继承值。

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

于 2013-10-04T07:44:55.840 回答
0

add this css:

#container p a {
    color: green;
}

#container div a {
    color: green;
}

#container span a {
    color: yellow;
}

Now remove the inline css since it is not needed.

Reason: since you told it to inherit, you need to explicitly declare each instance, i.e. you need to say #container p a needs to be green.

See it fixed: http://jsfiddle.net/DnhHb/6/

Also see a better formatted version: http://jsfiddle.net/DnhHb/9/

于 2013-10-04T06:04:31.457 回答
0

只需删除规则

#container a {
    color: inherit;
    font-size: inherit;    
}
于 2013-10-04T05:40:43.823 回答
0

看到这个链接

利用

* {
    font-size: inherit;
}

a {
    color: green;
}

#container a {

}

p {
    font-size: 18px;
}

h3 a{
    color: red;
    font-size: 28px !important;
}
span a{
    color: yellow;
}
于 2013-10-04T05:45:28.947 回答
0

检查这个http://jsfiddle.net/DnhHb/5/

color:inherit我刚刚从Container a课堂上删除了

于 2013-10-04T05:50:04.497 回答