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

时间:2013-07-16 20:57:34

标签: css inheritance anchor

考虑以下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的值。

编辑:显然,这与patching the CSS history leak有关。不过,我想知道是否有可能实现我想要的目标。

2 个答案:

答案 0 :(得分:5)

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

这在FF22,IE9 +(CSS2版本的IE8)和Chrome28中进行了测试。

我找到的唯一方法(并且可能只有 方式可以根据安全功能使用它)来根据继承的控件获得所需的颜色差异来自aa:visited州的在html 中有一些额外的标记。

具体而言,.bar以外的所有文字都需要包含在自己的span(或两个span元素中,如果文字也跟随.bar),那么.bar文本需要双重包装。我认为这是有效的,因为它使用.bar :visitednormal 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所需的工作。

See the fiddle.

{{1}}

答案 1 :(得分:0)

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

即可

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

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