Question

我只是在玩CSS并注意到一个有趣的场景，我无法找到解释。也许你们中的一些人有这个答案。

我有一个带内联样式的div元素

<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>

我的CSS

#text-sample {
    width:200px;
    white-space: nowrap;
}

#text-sample:hover {
    overflow:visible
}

此处悬停效果不适用。也就是说，overflow: visible规则没有采取。

注意：移动溢出：隐藏内联样式将解决问题。

我正在寻找悬停效果不适用的原因。谁能解释这种情况？

Answer 1

在其他条件相同的情况下，内联样式优先于通过样式表规则应用的样式。在您的情况下，当悬停时，通过样式表规则调用overflow: visible，但不能覆盖内联样式。如有必要，您可以尝试!important。

#text-sample {
    width: 200px;
    white-space: nowrap;
}

#text-sample:hover {
    overflow: visible !important;
}

<div id="text-sample" style="overflow:hidden;">
  This is a sample text to test the CSS behavior of inline styling
</div>

但是，在overflow: hidden样式表规则中指定#text-sample会更容易，而不是内联。

Answer 2

您的内联样式将始终覆盖您的外部CSS。您可以在!important

中使用:hover

#text-sample {
  width:200px;
  white-space: nowrap;
}

#text-sample:hover {
  overflow:visible!important;
}

Answer 3

内联样式优先于样式表。有两种方法可以改变它：使用JavaScript或在样式表中使用!important。

#text-sample:hover {
   overflow:visible !important;
}

Answer 4

在CSS中，有一些名为https://stackoverflow.com/a/44632423/947111的东西。简单地说，像

#id { color: red; }

优先于

.blue { color: red; }

有<div id="id" class="blue">之类的东西。见下面的例子。这是因为ID选择器（#）被解释为比类更重要。以同样的方式，具有稍后声明（稍后在文件中）的同样特定的选择器优先，选择器越具体，它就越重要。

对于您的示例：内联样式优先于CSS文件中的任何内容（除非使用!important）。我相信:hover并没有改变任何事实。

有关详细规则，请查看上面的链接。

＆＃13;

div {
    width:200px;
    white-space: nowrap;
}

#text-sample:hover,
#sample-2:hover {
    overflow:visible;
}

#sample-2 {
  overflow: hidden;
}

#foo {
  color: red;
}

.blue {
  color: blue;
}

＆＃13;

<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>

<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>

<div id="foo" class="blue">foo</div>

＆＃13;

修改

如评论中所述，特异性不适用于内联样式。尽管如此，内联样式优先于文件中CSS声明中的任何内容。但是，只要您将规则移动到相同的CSS文件中（如您所提到的那样），:hover就会比其他规则更重要，因为它在您悬停的那一刻更具体。

CSS内联样式忽略了悬停效果

4 个答案: