考虑以下HTML:
<a href="http://google.com">foo <span class="bar">bar</span></a>
和CSS:
a {
text-decoration:none;
border-bottom-width: 0px;
border-bottom-color: green;
border-bottom-style: solid;
}
a:visited {
color: red;
border-bottom-color: yellow;
}
a:hover {
color: gray;
border-bottom-color: gray;
}
.bar {
color: inherit;
border-bottom-width: 1px;
border-bottom-color: inherit;
border-bottom-style: inherit;
}
我的期望:
“bar”字样应为红色并带有黄色底边框(因为它应该从a:visited
继承,因为http://www.google.com
是访问过的链接。)
实际发生的事情:
“bar”字样为蓝色,其下边框为绿色,因为它是从a
继承而非a:visited
。
但它继承自a:hover
:它及其底部边框将颜色更改为灰色。
问题:如何让<a>
的孩子从:visited
状态继承值?我会接受涉及JS和jQuery的解决方案。至关重要的是,我将inherit
保留为color
和border-bottom-color
的值。
编辑:显然,这与patching the CSS history leak有关。不过,我想知道是否有可能实现我想要的目标。
答案 0 :(得分:5)
这在FF22,IE9 +(CSS2版本的IE8)和Chrome28中进行了测试。
我找到的唯一方法(并且可能只有 方式可以根据安全功能使用它)来根据继承的控件获得所需的颜色差异来自a
和a:visited
州的在html 中有一些额外的标记。
具体而言,.bar
以外的所有文字都需要包含在自己的span
(或两个span
元素中,如果文字也跟随.bar
),那么.bar
文本需要双重包装。我认为这是有效的,因为它使用.bar
:visited
(normal default inheriting of the color
value),因此它允许.bar
文字颜色状态传递给<a href="http://google.com">
<span>foo </span>
<span class="bar">
<span>bar</span>
</span>
</a>
这是代码(我为html显示创建了新行,只是为了让额外的标记更加明显):
更新未访问的底部边框颜色控制。
also controls the default border-color
<强> HTML 强>
a {
text-decoration:none;
color: green; /* controls unvisited border color */
border-bottom-width: 0px;
border-bottom-style: solid;
}
a span:not(.bar) {
color: blue; /* sets text color of unvisited links */
}
a:visited {
color: yellow; /*sets border color of visited links */
}
a:visited span:not(.bar) {
color: red; /* sets text color of visited links */
}
a:hover span:nth-child(n) {
/* nth-child(n) selects all, but is needed to override specificity of
:not(.bar) in the previous selector. NOTE: because all the text must be
wrapped in a child span, there is no need to define just the a:hover
selector without the following span, unless other links will use this
without a .bar nesting
*/
color: gray; /* sets text and border color when hovered */
/* eliminated unneeded border-color property */
}
.bar {
border-bottom-width: 1px;
border-bottom-style: inherit;
/* border-color uses color property of <a> in whatever state it is in */
}
CSS(CSS3版本)
a
CSS2(如果需要IE8浏览器支持)
您必须有条件地向IE8提供各种a
元素状态的css(基本a span {
color: blue;
}
a:visited {
color: yellow;
}
a:visited span {
color: red;
}
a:visited span.bar {
color: inherit;
}
a:hover span,
a:hover span.bar {
color: gray;
}
代码相同)。这不能与上述任何方式结合使用,否则会破坏Chrome所需的工作。
{{1}}
答案 1 :(得分:0)
一切正常,只需删除color: inherit;
和border-bottom-color: inherit;
Inherit将其设置回原始版本,因为它是<a>
的一部分,因此它没有任何内容可以继承