当前位置：文江博客话题详情

CSS 块级链接颜色覆盖 Chrome 中的默认值

发布于 2024-12-11 04:09:22 字数 351 浏览 0 评论 0原文

我有块级链接，其中包含具有不同颜色的其他块级元素。

我遇到的问题是，一旦您访问该链接，Google Chrome 就会显示 a:visited 颜色，而不是他的孩子的特定颜色。

我做了一个jsfiddle作为例子： http://jsfiddle.net/yvesvanbroekhoven/UTwgU

你可以看到Firefox 和 Firefox 的区别谷歌浏览器。单击链接，然后单击标题和颜色的颜色。文本应该是红色/绿色，但在 Chrome 中它们变成紫色。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢你一世 2024-12-18 04:09:22

这是无效的 HTML。您不能在内联元素中包含块级元素。将链接放入其他标签内：

<h1>
    <a href="http://google.com" target="blank">Title</a>
</h1>
<p>
    <a href="http://google.com" target="blank">Intro text</a>
</p>

CSS

h1 a  {
  color: red;
}

p a {
  color: green;
}

要设置访问链接的样式，请使用：

p a:visited{
    color: green;
}
h1 a:visited {
    color: red;
}

此处演示。

This is invalid HTML. You can't havr a block level element within an inline one. Put links inside the other tags:

<h1>
    <a href="http://google.com" target="blank">Title</a>
</h1>
<p>
    <a href="http://google.com" target="blank">Intro text</a>
</p>

CSS

h1 a  {
  color: red;
}

p a {
  color: green;
}

To style a visited link, use:

p a:visited{
    color: green;
}
h1 a:visited {
    color: red;
}

Demo here.

回复收藏 0 原文

苏辞 2024-12-18 04:09:22

我的 chrome (v 14.0.835.202) 中它是红色/绿色！
无论如何，您可以根据需要设置颜色：

a:visited p{
    color: green;
}
a:visited h1{
    color: red;
}

It is red/green in my chrome (v 14.0.835.202)!
Anyway you can set the colors as you want:

a:visited p{
    color: green;
}
a:visited h1{
    color: red;
}

回复收藏 0 原文

墨小墨 2024-12-18 04:09:22

在 Chrome 17 中似乎按预期工作。

如果 a 链接样式未继承到子块级元素，请尝试使用 inherit，例如：

<header>
<style scoped>
a {background-color: #f9fda2;} /* highlight */
/* without inherit h1 won’t get the link’s background-color */
a h1 {background-color: inherit;}
</style>
  <a href="/">
    <h1>Title</h1>
    <p>meta</p>
  </a>
</header>

seems to work as expected in Chrome 17.

If a link styles aren’t inheriting to child block-level elements, try using inherit, eg:

<header>
<style scoped>
a {background-color: #f9fda2;} /* highlight */
/* without inherit h1 won’t get the link’s background-color */
a h1 {background-color: inherit;}
</style>
  <a href="/">
    <h1>Title</h1>
    <p>meta</p>
  </a>
</header>

回复收藏 0 原文

~没有更多了~