"inherit"值不会从":visited"父级继承

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价值是至关重要的.colorborder-bottom-color

编辑:显然,这与修补CSS历史漏洞有关.不过,我想知道是否有可能实现我想要的东西.

Answer 1

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

这是在FF22,IE9 +(CSS2版本的IE8)和Chrome28中测试的.

我发现的唯一方法(并且可能是它在所有安全功能下都可以工作的唯一方法)来获得基于来自和状态的继承控制所需的颜色区分是通过html中的一些额外标记.aa:visited

具体来说,所有.bar需要的文本都需要自己包装span(或两个span元素,如果文本也跟着.bar),然后.bar文本需要双重包装.我认为这个工程,因为它使用的是在正常的默认继承color值的.bar(这也控制默认border-color),因此它允许:visited文本颜色状态传递给.bar.

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

更新为未访问的底部边框颜色控制.

看小提琴.

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浏览器支持)

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

看小提琴.

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