The color I set for the visited links is being applied to the links before they've been visited. Why?

This is what my CSS code looks like:

/* Create visited and hover styles for all links inside 'main' */

main a:hover { background-color: skyblue; }

main a:visited { color: red; }

The 'a:hover' declaration works just fine. When I hover over the links, the background color changes, as it should.

But the 'a:visited' selector isn't working right. The links are red before I've even clicked them as while as after. They should only be red AFTER, not before.

In an effort to fix this, I experimented by making the property and value for the 'a:visited' selector different. I set the background-color to orange. What that did was even stranger. It made the background color of those links change to orange only when I hovered over them! Which is strange, because the selector I was style is not a ":hover" selector, it's a ":visited" selector.

Can anyone tell me what I'm doing wrong? Or if it's supposed to be doing this? Because I don't think it is. This is the first problem I've had with this course so far.