Trung tâm cá nhân
sách gpt4 ăn đã đi

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

In lại 作者：太空狗 更新时间：2023-10-29 12:35:40 26 4
mua khóa gpt4 giày nike

考虑以下 HTML:

foo bar

和 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 {
    màu sắc: kế thừa;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: inherit;
}

jsFiddle

我的期望:

“bar”字应该是红色的并且有一个黄色的底部边框(因为它应该继承自 a:visited ,bởi vì http://www.google.com 是一个访问过的链接)。

实际发生了什么:

“bar”字是蓝色的，它的底部边框是绿色的，因为它继承自Một。 , 不是 a:visited .

不过，它确实继承自 a:hover : 它和它的底部边框颜色变为灰色。

问题:如何生成 的 child ？从其 :đã ghé thăm 继承值state? 我会接受涉及 JS 和 jQuery 的解决方案。我保留 kế thừa 很重要作为 màu sắc 的值和 viền-dưới-màu .

biên tập:显然，这与 patching the CSS history leak 有关.不过，我想知道是否有可能实现我想要的。

câu trả lời hay nhất

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

这已在 FF22、IE9+(CSS2 版本为 IE8)和 Chrome28 中测试。

我找到的唯一方法(并且可能是唯一在考虑到安全功能的情况下它会起作用的方法)根据继承控制获得您想要的颜色差异Một Và a:visited 状态是通过 html 中的一些额外标记 实现的。

具体来说，.bar 之外的所有文本都需要包裹在它自己的 khoảng cách 中(或者两个 khoảng cách 元素，如果文本也后跟 .bar)，然后 .bar 文本需要双重换行。我认为这是可行的，因为它使用的是 normal default inheriting of the màu sắc giá trịvì .bar(also controls the default màu viền)，因此它允许将 :đã ghé thăm 文本颜色状态传递给 .bar。

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

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

See the fiddle.

HTML


  foo 
  
    bar

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  in whatever state it is in */
}

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

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

See the fiddle. 

a span {
    color: blue;
}

a:visited {
    color: yellow;
}

a:visited span {
    color: red;
}

a:visited span.bar {
    màu sắc: kế thừa;
}

a:hover span,
a:hover span.bar {
    color: gray;
}

关于css - "inherit"值不 't inherit from ":visited"parent，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17686842/

26 4 0
Đề xuất bài viết: jquery - 使用固定标题偏移 anchor 链接
Đề xuất bài viết: c - 在内核中访问用户空间结构的成员给出了错误的值
Đề xuất bài viết: 元素的 jQuery 标签名称
Đề xuất bài viết: html - foreignObject 显示 :block not working in chrome
太空狗
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress