锚元素什么时候不会继承父元素的颜色属性?

问题描述 投票:0回答:8

这是我的代码:

.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>
颜色的东西。

css inheritance
8个回答
62
投票

只是其他回复的附录,如果您想要您的

<a>
标签从其父级继承颜色,您可以使用

a {color: inherit; }

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

a {
  color: inherit;
}
<span class="blue">::<a href="/equipment_new.php">CLICK HERE</a>:: to view our New Equipment inventory. <br /><br /></span>


39
投票

默认情况下,如果存在 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

用户代理通常在以下位置呈现链接 使它们显而易见的方式 用户(下划线、反向视频、 ETC。)。确切的渲染取决于 用户代理。渲染效果可能会有所不同 根据用户是否有 是否已经访问过该链接。

......

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


9
投票

这是对问题的回答,也是对Kevin的回答及其评论的回复。

锚标记do继承颜色,无论是否链接。他们在实践中不这样做的唯一原因是因为他们已经在浏览器的默认样式表中设置了颜色。对于链接的下划线也可以这样说(我猜你没有注意到,因为你实际上想要它或者已经自己更改了它)。

在 Firefox 中,如果您切换“显示用户代理 CSS”,您可以在 Firebug 中看到这一点(或者您可以直接查看 Firefox 的内部样式表)。您也可以在 Webkit 的 Web Inspector 和 Opera 的 Dragonfly 中看到浏览器的默认设置。我认为你不能在 IE 中。

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

要了解一般情况下哪些属性是继承的,可以使用CSS2参考属性索引表(参见“继承?”栏)。 SitePoint 还在其 CSS 参考中提到了它。

因此,如果您想确保链接从其父链接继承其颜色,而不是从浏览器的默认样式表继承,您最好这样做:

.blue a:link {
    color: inherit;
}

您可以分别为不同的伪类设置它(因此也可以设置

:visited
:hover
:active
),或者一起为
a
标签设置。

但是,IE6和IE7不支持

inherit
关键字,所以如果你也想支持它们,你必须明确设置颜色。


5
投票

我认为

a
默认情况下不会继承颜色。 (当然,它在我的网站上一直都是这样工作的)。为什么不改变

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

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

3
投票

Firebug 将向您准确显示哪些样式规则应用于哪些元素。非常适合这个。

(非 CSS 可能性:您的

link/alink/vlink
标签上有
<body>
属性吗?)

编辑:呃,愚蠢的我,其他人说得对 -

<a href>
不会继承颜色。但 Firebug 仍然是解决这类问题的好工具(即使我不是。8-)


1
投票

除了 firebug(这应该是您的第一个停靠点)之外,IE 开发工具栏还会告诉您给定样式的来源,以防 IE - 震惊、恐怖 - 应该有所不同。


0
投票

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


0
投票

您可能会看到 a:visited 颜色。试试这个:

.blue, .blue:link, .blue:visited {
  color:#6E99E1;
  font-size:9px;
}
© www.soinside.com 2019 - 2024. All rights reserved.