什么时候<a> tag not inherit color attribute of parent tag?</a>

时间:2009-07-17 18:26:10

标签: css inheritance

这是我的代码:

.blue {
    color:#6E99E1;
    font-size:9px;
}
<span class="blue">::<a href="/equipment_new.php">CLICK HERE</a>:: to view our New Equipment inventory. <br /><br /></span>

我以某种方式触发了阻止<a>标记继承父<span>颜色的内容。

8 个答案:

答案 0 :(得分:45)

只是其他回复的附录,如果您希望您的<a>标记继承其父级的颜色,则可以使用

a {color: inherit; }

答案 1 :(得分:32)

默认情况下,如果存在href属性,则锚标记不会继承像颜色这样的属性。

在页面上查看这两者之间的区别(我不知道如何在帖子上显示它):

<span style=color:green><a href="t">test</a></span>


<span style=color:green><a>test</a></span>

以下链接指向w3 c:

http://www.w3.org/TR/html401/struct/links.html#h-12.2

  

用户代理通常会在其中呈现链接   这样一种方式使它们显而易见   用户(下划线,反向视频,   等等。)。确切的渲染取决于   用户代理。渲染可能会有所不同   根据用户是否有   已经访问过该链接。

.....

  

通常,A的内容不是   A时以任何特殊方式呈现   仅定义一个锚。

答案 2 :(得分:8)

这是对问题的回答以及对Kevin's answer及其评论的回复。

锚标记执行继承颜色,链接与否。他们在实践中没有的唯一原因是因为他们已经在浏览器的默认样式表中设置了颜色。对于链接的下划线也是如此(我认为,你没有注意到,因为你实际上想要它或者你自己已经改变了它。)

在Firefox中,如果您切换“显示用户代理CSS”(或者您可以直接查看Firefox's internal stylesheets,则可以在Firebug中看到此内容。您可以在Webkit的Web Inspector和Opera的Dragonfly中看到浏览器的默认值好吧。我认为你不能在IE浏览器中。

我不知道任何浏览所有浏览器默认设置的网站。 CSS2的“信息性”HTML4 stylesheet以及YUI reset stylesheet将是一个很好的起点,但它们都没有提到任何(链接)颜色(HTML4样式表确实提到了下划线)。

要找出一般继承的属性,可以使用CSS2 reference property index table(请参阅“继承?”列)。 SitePoint还在其CSS reference中提及它。

因此,如果您想确保您的链接从其父级而不是浏览器的默认样式表继承其颜色,那么理想情况下应该执行以下操作:

.blue a:link {
    color: inherit;
}

您可以单独为不同的伪类设置它(所以:visited:hover:active也是如此),或者共同设置a标记。

然而,IE6 and IE7 don't support the inherit keyword,所以如果你也想支持它们,你必须明确地设置颜色。

答案 3 :(得分:5)

我认为a默认不会继承颜色。 (当然,它一直在我的网站上运行)。为什么不改变

.blue {
    color:#6E99E1;
    font-size:9px;
}

.blue, .blue a{
    color:#6E99E1;
    font-size:9px;
}

答案 4 :(得分:3)

Firebug将准确显示哪些样式规则应用于哪些元素。这是完美的。

(非CSS可能性:您的link/alink/vlink代码中是否有<body>个属性?)

编辑:嗯,愚蠢的我,其他人说得对 - <a href>不会继承颜色。但Firebug仍然是解决这类问题的好工具(即使我不是.8 - )

答案 5 :(得分:1)

除了firebug(应该是你的第一个停靠点)之外,IE developer toolbar还会告诉你某个给定风格的来源,以防万一IE - 震惊,恐怖 - 应该是不同的。< / p>

答案 6 :(得分:0)

您需要明确设置链接的颜色以覆盖默认的蓝色。

答案 7 :(得分:0)

您可能会看到a:访问过的着色。试试这个:

.blue, .blue:link, .blue:visited {
  color:#6E99E1;
  font-size:9px;
}