CSS <a> 在 Chrome 中有错误的颜色，但在资源管理器中是可以的答案

【问题标题】：CSS <a> has a wrong color in Chrome, but in Explorer it is all rightCSS <a> 在 Chrome 中有错误的颜色，但在资源管理器中是可以的
【发布时间】：2014-05-23 06:14:17
【问题描述】：

我在不同的浏览器中遇到了不明确的 CSS 编译问题。我想为主页上主要新闻标题中的链接设置不同的颜色。

一般我都是这样声明链接的：

a:visited
{
    color: purple;
}
a :hover
{
    color: aqua;
}

但对于 mainNewsTitle 链接，我声明：

.mainNewsTitle a
{
    color:white;
}
.mainNewsTitle a :visited
{
    color:white;
}

我在 cshtml 文件中有这段代码：

@if (Model.MainNews[0].Title.Length > 40)
{
    <h2 id="mainNewsTitle1" class="mainNewsTitle"><a href="@Model.MainNews[0].Link" target="_blank">@Model.MainNews[0].Title.Substring(0, 40)...</a></h2>
}
else
{
    <h2 id="mainNewsTitle1" class="mainNewsTitle"><a href="@Model.MainNews[0].Link" target="_blank">@Model.MainNews[0].Title</a></h2>
}

在 Internet Explorer 中，它显示正确的链接 - 白色。在谷歌浏览器中为蓝色，访问后为紫色。

【问题讨论】：

我将首先删除此处的空格：a :visited -> a:visited。 IE 不小心允许这样做，但它实际上是无效的（或者至少它并不意味着你认为它的意思）。

标签： html css google-chrome asp.net-mvc-5 internet-explorer-10

【解决方案1】：

去掉a :visited中的空格；它引起了问题。使用空格，您将尝试定位 a 的任何已访问子项，而不是定位已访问过的链接。

.mainNewsTitle a {
    color:white;
}

.mainNewsTitle  a:visited {
    color:white;
}

【讨论】：

是的，你是对的。谢谢！我认为写空格或这个>都没关系。因为在 MVC 中他不会忽略 CSS 中的空格。 div .class1 表示某个 class1 元素，在 div 内部，但 div.class1 表示 div，其类名为“class1”。
你的第一个答案是对的。 :-D 我在.mainNewsTitle a {color:white;} 有一个空间，它是蓝色的。

【解决方案2】：

css 声明中的空格是“后代组合符”。

From w3c doc

后代组合符是分隔两个序列的空格简单的选择器。 “A B”形式的选择器表示元素 B 是某个祖先元素 A 的任意后代。

您正在选择a 元素内的任何悬停元素。

要选择锚标记，您应该使用a:hover 而不是a :hover 和a:visited 而不是a :visited。

【讨论】：