为什么悬停时边框没有变化？答案

【问题标题】：Why border is not changing on hover?为什么悬停时边框没有变化？
【发布时间】：2013-03-11 03:10:13
【问题描述】：

这是我的代码：

<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>

我很困惑：为什么悬停时边框颜色没有变化？

【问题讨论】：

标签： css hover border

【解决方案1】：

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

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

另一种选择是将初始样式也移动到 <style> 标记中。

p {
    border: 2px solid green;
}

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

Here 是一个 TL;DR 风格的 CSS 优先级解释，如果您喜欢更长一点的内容，也可以查看 relevant part of the CSS spec。

【讨论】：

你真的不应该使用重要的
也许他出于某种原因一直使用该 HTML 代码。在这种情况下，别无选择，只能使用!important。
真的有必要在pp之后声明p:hover吗？
他可以增加hover标签的特异性
你不能比内联style 属性更具体，除非使用!important...@drahnr：不.. 刚刚测试并更新了我的答案。

【解决方案2】：

内联样式的优先级高于单独的 css 部分

编辑：叹息第二次 - 有点太慢了。

这应该可行 - 据我所知 !important 不被认为是好的做法，所以我建议使用这种方法：

<style type="text/css">
p{border:2px solid green;}
p:hover{border:2px solid red;}
</style>
<body>
<p>foobar</p>
</body>

【讨论】：

【解决方案3】：

如果您只能访问 CSS（例如，因为另一个部门拥有 HTML，或者它是通过另一种方法引入的），您必须使用 !important。使用!important 绝对没问题，因为它旨在作为对这种情况的补救措施。认为它是“不好的做法”的想法是错误的（除非您使用它来懒惰地关注您的 CSS 特异性）。

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

<body>
    <p style="border:2px solid green">foobar</p>
</body>

浏览器没有 p:hover 的内置 CSS 声明，就像 a:hover, a:active, a:visited 等一样；因此，HTML 中的内联样式是唯一在运行时被识别的样式。除非...有一个 !important 可以给 :hover 一个样式。

【讨论】：