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

这里是我的代码：为什么边界在悬停时不会改变？

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

我感到困惑：为什么边框颜色不改变悬停？

来源

2013-03-10 user1390378

内联样式的优先级高于任何不是!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，CSS重点DR式的解释，如果你喜欢的东西多一点的时间，你也可以看看relevant part of the CSS spec。

来源

2013-03-10 18:54:14 ThiefMaster

你真的不应该使用重要的 – 2013-03-10 18:58:32

也许他出于某种原因被禁止使用该HTML代码。在这种情况下，除了使用'！important'外，不会有其他选择。 – ThiefMaster 2013-03-10 18:59:20

“p：hover”是否真的有必要声明_after_'p'？ – drahnr 2013-03-10 18:59:48

内联样式比单独的CSS部分

更高的优先级

编辑：叹息 2日 - 只是一点点太慢。

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

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

来源

2013-03-10 18:54:46 drahnr

如果你只能访问到CSS（比方说，因为另一个部门拥有HTML，或者通过其他方法引入），则必须使用!important。使用!important绝对没问题，因为它的目的是为了解决这种情况。它是“不好的做法”的想法是错误的（除非你使用它对你的CSS特性懒惰）。

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

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

浏览器没有内置的CSS声明p:hover就像他们为a:hover, a:active, a:visited等做;因此，HTML中的内联样式是在运行时识别的唯一样式。除非......有一个!important可用于给:hover一种风格。

来源

2013-03-10 19:10:13 Dawson

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

回答

相关问题