Mixing styles with overriden style for link

Question

I have two different style for links and links inside <p> tag.

I am using basic inheritance. And for links inside <p> it works ok. But for some reason it breaks style of common links.

active selector applies blue color while it should be red.

See fiddle:

a {
    font-family: Arial;
    text-decoration: none;
}

a:link, a:visited {
    color: black;
}

a:hover, a:active {
    color: red;
}

p a {
    background-color: #DCDCDC;
}

p a:hover, a:active {
    color: blue;
}

<a href="http://stackoverflow.com">general link</a>
<p>
  <a href="http://stackoverflow.com">link inside p</a>
</p>

What's wrong with it?

Answer 1

p a:hover, a:active {

You are misunderstanding the precedence of ,. That means

p a:hover { /* foo */ }
a:active { /* foo */ }

not

p a:hover { /* foo */ }
p a:active { /* foo */ }

You want:

p a:hover, 
p a:active {