0

这是我的代码：

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

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

4

3 回答 3

5

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

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

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

p {
    border: 2px solid green;
}

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

这是对 CSS 优先级的 TL;DR 风格的解释，如果您更喜欢更长的时间，您还可以查看CSS 规范的相关部分。

于 2013-03-10T18:54:14.040 回答
2

内联样式比单独的 CSS 部分具有更高的优先级

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

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

<style type="text/css">
p{border:2px solid green;}
p:hover{border:2px solid red;}
</style>
<body>
<p>foobar</p>
</body>
于 2013-03-10T18:54:46.793 回答
1

如果您只能访问 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就像他们为 an 所做的那样a:hover, a:active, a:visited；因此，HTML 中的内联样式是唯一在运行时被识别的样式。除非......有一个!important可用:hover的风格。

于 2013-03-10T19:10:13.990 回答