我只是在玩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
规则没有采取。
注意:移动溢出:隐藏内联样式将解决问题。
我正在寻找悬停效果不适用的原因。谁能解释这种情况?
答案 0 :(得分: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
会更容易,而不是内联。
答案 1 :(得分:1)
您的内联样式将始终覆盖您的外部CSS。
您可以在!important
:hover
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible!important;
}
答案 2 :(得分:1)
内联样式优先于样式表。有两种方法可以改变它:使用JavaScript或在样式表中使用!important
。
#text-sample:hover {
overflow:visible !important;
}
答案 3 :(得分:0)
在CSS中,有一些名为https://stackoverflow.com/a/44632423/947111的东西。简单地说,像
#id { color: red; }
优先于
.blue { color: red; }
有<div id="id" class="blue">
之类的东西。见下面的例子。
这是因为ID选择器(#
)被解释为比类更重要。以同样的方式,具有稍后声明(稍后在文件中)的同样特定的选择器优先,选择器越具体,它就越重要。
对于您的示例:内联样式优先于CSS文件中的任何内容(除非使用!important
)。我相信:hover
并没有改变任何事实。
有关详细规则,请查看上面的链接。
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
就会比其他规则更重要,因为它在您悬停的那一刻更具体。