4

考虑以下 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是一个访问过的链接）。

实际发生的情况：

“条”字是蓝色的，它的底边是绿色的，因为它继承自a，而不是a:visited。

但是，它确实继承自a:hover: 它及其底部边框将颜色变为灰色。

问题：我怎样才能让一个孩子<a>从它的状态继承价值:visited？我将接受涉及 JS 和 jQuery 的解决方案。inherit保持和 的值是至关重要color的border-bottom-color。

编辑：显然，这与修补 CSS 历史泄漏有关。不过，我想知道是否有可能实现我想要的。

4

2 回答 2

5

不幸的是，似乎需要额外加价

这在 FF22、IE9+（CSS2 版本为 IE8）和 Chrome28 中进行了测试。

我发现的唯一方法（并且可能是考虑到安全功能的唯一方法）根据从and状态继承的控制来获得所需的颜色差异是通过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元素状态的不同 CSS 集提供给 IE8（基本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;
}
于 2013-07-17T13:39:53.843 回答
0

它工作正常只需删除color: inherit;和border-bottom-color: inherit;

Inherit 将其设置回原始状态，因为它是 the 的一部分，<a>因此它没有可继承的内容

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

于 2013-07-16T21:09:26.203 回答