Question

我在不同的浏览器中有一个模糊的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中，它显示右侧链接 - 白色。在谷歌浏览器中，它是蓝色的，访问后它是紫色的。

Answer 1

css声明中的空格是＆＃34;后代组合＆＃34;。

From w3c doc

后代组合子是用于分隔两个序列的空格简单的选择器。表格选择器＆＃34; A B＆＃34;表示元素B. 这是一些祖先元素A的任意后代。

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

要选择锚标记，您应使用a:hover代替a :hover和a:visited代替a :visited。

Answer 2

删除a :visited中的空格;它会导致问题。通过空格，您可以尝试定位任何已访问过的儿童，而不是定位已访问过的链接。

.mainNewsTitle a {
    color:white;
}

.mainNewsTitle  a:visited {
    color:white;
}

CSS <a> has a wrong color in Chrome, but in Explorer it is all right</a>

2 个答案: