带有链接的Css样式优先级

Question

我有一个<div>，它的类赋予它蓝色，但没有显示蓝色。我不明白为什么？

• 这是因为a优先于蓝色类吗？我试过了：.blue{}，因为它更具体，它应该赢，这错了吗
• 如果我删除"某些链接"，那么它就工作了。为什么？我看不出有什么关系

以下是要检查的示例：

a {
    outline:0;
    text-decoration:none;
}
a:link, a:visited {
    color:black;
}
a:hover {
    color:black;
    text-decoration: none;
}
.blue {
    color:blue;
}

<p>Some text, some text</p>
<p>
    <a href="http://apple.com"> Some link </a>
<p>
<a href="next.php">
    <div class="blue"> This text should be blue </div>
</a>

JSFiddle

Answer 1

您只需要关闭<p>标签：

<p><a href="http://apple.com"> Some link </a></p> 

Answer 2

尝试以下操作：

a { outline:0; text-decoration:none ; }
a:link, 
a:visited { color:black; }
a:hover { color:black; text-decoration: none; } 

.blue｛color:蓝色；｝

<p> Some text, some text </p>
<p><a href="http://apple.com"> Some link </a></p> 
<a href="next.php">
<span class="blue"> This text should be blue </span>
</a>

Chrome正在更正您的代码，并将带有蓝色类的div放在标记之外，因为它是一个块元素，而a不是。

注意：格式错误的p标签解决了这个问题