link 的混合样式与覆盖样式

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://whosebug.com">general link</a>
<p>
  <a href="http://whosebug.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 {

link 的混合样式与覆盖样式

Mixing styles with overriden style for link

html

css

stylesheet

hyperlink