CSS <a> 标签什么时候不会继承父标签的颜色属性?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1144931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When will an <a> tag not inherit color attribute of parent tag?
提问by omg
Here is my code:
这是我的代码:
.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>
I've somehow triggered something that prevented the <a>
tag from inheriting color of parent <span>
.
我以某种方式触发了一些阻止<a>
标签继承 parent 颜色的事情<span>
。
回答by David says reinstate Monica
Just an addendum to the other responses, if you wantyour <a>
tags to inherit the colour from their parent you can use
只是其他回复的附录,如果您希望您的<a>
标签继承其父级的颜色,您可以使用
a {color: inherit; }
回答by kemiller2002
By default an anchor tag does not inherit attributes like color if an href attribute is present.
默认情况下,如果存在 href 属性,则锚标记不会继承颜色等属性。
Check out the difference between these two on a page:
在页面上查看这两者之间的区别:
<span style=color:green><a href="t">test</a></span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
以下链接指向 w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.
用户代理通常以对用户显而易见的方式呈现链接(下划线、反向视频等)。确切的渲染取决于用户代理。渲染可能会根据用户是否已经访问过链接而有所不同。
.....
.....
Usually, the contents of A are not rendered in any special way when A defines an anchor only.
通常,当 A 仅定义一个锚点时, A 的内容不会以任何特殊方式呈现。
回答by mercator
This is an answer to the question as well as a reply to Kevin's answerand its comments.
Anchor tags doinherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually wantit or had already changed it yourself).
锚标签确实继承了颜色,无论是否链接。他们没有在实践中的唯一原因是因为他们已经在浏览器的默认样式表中设置了颜色。对于链接的下划线也可以这样说(我认为,您没有注意到,因为您实际上想要它或已经自己更改了它)。
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheetsdirectly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
在 Firefox 中,如果您切换“显示用户代理 CSS”,您可以在 Firebug 中看到这一点(或者您可以直接查看Firefox 的内部样式表。您也可以在 Webkit 的 Web Inspector 和 Opera 的 Dragonfly 中查看浏览器的默认设置。我不知道)不认为你可以在 IE 中。
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheetas well as the YUI reset stylesheetwould be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
我不知道有任何网站可以概述所有浏览器的默认设置。CSS2 的“信息性” HTML4 样式表以及YUI 重置样式表将是一个很好的起点,但它们都没有提到任何(链接)颜色(HTML4 样式表确实提到了下划线)。
To find out which properties are inherited in general, you can use the CSS2 reference property index table(see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
要找出一般继承的属性,您可以使用CSS2 参考属性索引表(请参阅“继承?”列)。SitePoint 在其CSS 参考中也提到了它。
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
因此,如果您想确保您的链接从其父级继承其颜色,而不是从浏览器的默认样式表继承其颜色,则最好执行以下操作:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited
, :hover
and :active
as well), or for the a
tag altogether.
你可以将其设置为不同的伪类分开(这样:visited
,:hover
和:active
也),或在a
标签完全。
However, IE6 and IE7 don't support the inherit
keyword, so if you want to support them too, you'd have to set the color explicitly.
但是,IE6 和 IE7 不支持inherit
关键字,因此如果您也想支持它们,则必须明确设置颜色。
回答by Nico Burns
I think a
doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
我认为a
默认情况下不会继承颜色。(当然,它在我的网站上一直都是这样工作的)。为什么不改变
.blue {
color:#6E99E1;
font-size:9px;
}
to
到
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
回答by RichieHindle
Firebugwill show you exactly which style rules are applied to which elements. It's perfect for this.
Firebug会准确地向您显示哪些样式规则适用于哪些元素。它非常适合这个。
(A non-CSS possibility: Do you have link/alink/vlink
attributes on your <body>
tag?)
(非 CSS 可能性:link/alink/vlink
您的<body>
标签上有属性吗?)
Edit: Duh, silly me, the others have it right - <a href>
doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
编辑:呃,愚蠢的我,其他人说得对 -<a href>
不继承颜色。但是 Firebug 仍然是解决此类问题的好工具(即使我不是。8-)
回答by annakata
In addition to firebug (which should be your first port of call), the IE developer toolbarwill also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
除了 firebug(应该是您的第一个调用端口)之外,IE 开发人员工具栏还会告诉您给定样式的来源,以防万一 IE(震惊、恐怖)应该有所不同。
回答by miguelSantirso
You need to explicitly set the color of the links to override the default blue color.
您需要明确设置链接的颜色以覆盖默认的蓝色。
回答by Shawn Wernig
You are likely seeing the a:visited colouring. Try this:
您可能会看到 a:visited 着色。尝试这个:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}