html - 将样式与链接的覆盖样式混合

Question

我有两种不同样式的链接和内部链接 <p>标签。

我正在使用基本继承。以及 <p> 内的链接它工作正常。但出于某种原因，它打破了通用链接的样式。

active选择器适用 blue颜色应该是 red .

参见 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>

这是怎么回事？

Answer 1

p a:hover, a:active {

您误解了 , 的优先级。这意味着

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

不是

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

你想要:

p a:hover, 
p a:active {