Question

我有一个HTML如下：

<html>
    <head>
        <style type="text/css">
            a {color: red}
        </style>
    </head>
    <body>
        <div>
            <html>
                <body>
                    <a href="#">Test Link</a>
                </body>
            </html>
        </div>
    </body>
</html>

“测试链接”以绿色显示。通过这个我理解div里面的HTML采用父HTML的CSS。在我的场景中，我无法控制父HTML。我只能控制div的内容。有没有办法为div里面的HTML提供一个干净，新鲜的CSS？我不希望将父HTML的CSS应用于div里面的HTML。任何帮助表示赞赏。

由于

Answer 1

您的HTML令人作呕，请使用iframe。

page1.html

<html>
    <head>
        <style type="text/css">
            a {color: red}
        </style>
    </head>
    <body>
        <div>
            <iframe src="page2.html"></iframe>
        </div>
    </body>
</html>

page2.html

<html>
    <body>
        <a href="#">Test Link</a>
    </body>
</html>

无关，我很抱歉，但你是色盲的。

Answer 2

您可以使用>子选择器。

body>a {
  color: red;
}

这样只会设置身体直接子项的链接。请记住，IE不支持这一点。

我可以建议使用正确的语法

<html>
    <head>
        <style type="text/css">
            body>a {color: red}
        </style>
    </head>
    <body>
        <div>
           <a href="#">Test Link</a>
        </div>
    </body>
</html>

Answer 3

您不能使用这样的HTML标记。它不会重新启动CSS属性。

如果您不希望所有标签都是绿色，请不要使用CSS来表示您这样做！

Answer 4

伙计，你的代码非常糟糕且无效:)要为div里面的HTML提供干净，全新的CSS，你可以使用iframe。

Answer 5

使用本地化重置。

抓住CSS重置，例如Eric Meyer's Reset Reloaded并将其更改为适用于您的div。

因此，在每个元素的前面，将div的{{1}}或其他内容放在那里。您可以随意将大量选择器修剪为您使用的选项。如果此id被包含在其他人的网页中，您可能希望将其命名为div或id的{{1}}。class。这将确保没有命名冲突。当广泛支持时，您可以使用CSS命名空间（暂时关闭......）

然后你可以在里面玩CSS。

，验证您的HTML。查看错误，并修复它们。不要依赖浏览器对标记的错误处理，因为它只会让调试变得很麻烦。

div中的HTML采用父HTML CSS

5 个答案: