css - "inherit"值不 't inherit from ":visited"parent

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> 的 child ？从其 :visited 继承值state? 我会接受涉及 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 文本需要双重换行。我认为这是可行的，因为它使用的是 normal default inheriting of the color value对于 .bar(also controls the default border-color)，因此它允许将 :visited 文本颜色状态传递给 .bar。

这是代码(我为 html 显示添加了新行只是为了让额外的标记更明显):

更新了unvisited 底部边框颜色控制。

See the fiddle.

HTML

<a href="http://google.com">
  <span>foo </span>
  <span class="bar">
    <span>bar</span>
  </span>
</a>

CSS(CSS3 版本)

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 */
}

CSS2(如果需要IE8浏览器支持)

您必须有条件地为 IE8 的各种 a 元素状态提供一组不同的 css(基本 a 代码是相同的) .这不能以任何方式与上述组合，否则它会扰乱 Chrome 所需的工作。

See the fiddle.

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;
}