将样式与覆盖样式混合用于链接

Question

<p>标记中的链接和链接有两种不同的样式。

我使用的是基本继承。对于<p>内部的链接，它可以正常工作。但出于某种原因，它打破了常见联系的风格。

active选择器应用blue颜色，而它应该是red。

参见小提琴：

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 {