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

Question

I have a problem with an ambiguous CSS compilation in different browsers. I want to have a different color for a link in the title of main news on the home page.

Generally I declare links in this way:

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

But for mainNewsTitle link I declare this:

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

I have this code in cshtml file:

@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>
}

In Internet Explorer, it displays the link right - white color. In Google Chrome, it is blue and after visit it is purple.

Answer 1

Remove the space in a :visited; it's causing problems. With a space, you're trying to target any visited children of a, instead of targeting an a link that has already been visited.

.mainNewsTitle a {
    color:white;
}

.mainNewsTitle  a:visited {
    color:white;
}

Answer 2

A whitespace in a css declaration is a "descendant combinator".

From w3c doc

A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

You are selecting any hovered element inside a elements.

To select anchor tags you should use a:hover instead of a :hover and a:visited instead of a :visited.