我有一些非常基本的HTML,并尝试div使用内联样式设置样式.第一个片段通过将样式放在head元素中来工作,但另一个片段根本不起作用.是什么原因？
作品
<!DOCTYPE html>
<html>
<head>
<style>
#click-me {
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id='click-me'></div>
<iframe src='//someURL' width=800 height=600>
</body>
</html>
不行
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='click-me'></div>
<iframe src='//someURL' width=800 height=600>
<style>
#click-me {
background-color: red;
width: 200px;
height: 200px;
}
</style>
</body>
</html>
您的<style>标记位于<iframe>标记内,因此不会将其解析为父文档的一部分.
添加</iframe>,它应该工作.
该style元素被设计为仅放置在HTML文档的head元素中(需要元数据).
如果你想使用内联样式,你可以这样做:
<div id='click-me' style='background-color: red; width: 200px; height: 200px;'></div>
然而,这通常是不受欢迎的,因为样式应该包含在样式表中以便于维护.
编辑:这个在你的情况下不起作用的原因在SLaks的答案中有所介绍:https://stackoverflow.com/a/26258094/1317805