为什么悬停时边界不会改变？

Question

为什么悬停时边界不会改变？

这是我的代码:

<html>
<head>
<style type="text/css">
   p:hover{border:2px solid red;}
</style>
</head>
<body>
   <p style="border:2px solid green;">This is a paragraph.</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我很困惑:为什么悬停时边框颜色不会改变？

Answer 1

Thi*_*ter 5

内联样式的优先级高于任何不是的CSS规则!important.所以解决方案是将p:hover规则中的属性标记为重要:

p:hover {
    border:2px solid red !important;
}

Run Code Online (Sandbox Code Playgroud)

另一个选择是将初始样式移动到<style>标记中.

p {
    border: 2px solid green;
}

p:hover {
    border: 2px solid red;
}

Run Code Online (Sandbox Code Playgroud)

这是一个TL; DR风格的CSS优先级解释,如果你喜欢更长的东西,你也可以看一下CSS规范的相关部分.

归档时间：	12 年，7 月前
查看次数：	1067 次
最近记录：	12 年，7 月前