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>

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

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

Answer 2

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

编辑：叹息第二名 - 只是有点太慢了。

这应该有效 - 据我所知!important不被视为良好做法，所以我建议使用这种方法：

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

Answer 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一种风格。

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

3 个答案: