混合样式与覆盖样式的链接

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 {