Question

我有一些非常基本的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>

Answer 1

您的<style>标记位于<iframe>标记内，因此不会被解析为父文档的一部分。

添加</iframe>，它应该有效。

Answer 2

style元素只能放置在HTML文档的head元素中（需要元数据）。

如果您想使用内联样式，请改为：

<div id='click-me' style='background-color: red; width: 200px; height: 200px;'></div>

然而，由于样式应包含在样式表中以便于维护，因此通常不赞成。

编辑：SLak＆＃39;中涵盖了您的情况不起作用的原因。在这里回答：https://stackoverflow.com/a/26258094/1317805

2 个答案: