Question

考虑以下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;
}

jsFiddle

我的期望：

“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有关。不过，我想知道是否有可能实现我想要的目标。

Answer 1

不幸的是，似乎需要额外的标记

这在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"> foo bar </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版本）

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所需的工作。

See the fiddle.

{{1}}

Answer 2

一切正常，只需删除color: inherit;和border-bottom-color: inherit;

即可

Inherit将其设置回原始版本，因为它是<a>的一部分，因此它没有任何内容可以继承

工作小提琴：http://jsfiddle.net/Hive7/5a8Pk/3/

“inherit”值不会从“：visited”父级继承

2 个答案:

不幸的是，似乎需要额外的标记