HTML 文件中的多个“HTML”标签：当类和 id 可以相同时如何分隔 CSS 规则？答案

【问题标题】：multiple "HTML" tags in HTML file: how to separate CSS rules when classes and id's can be the same?HTML 文件中的多个“HTML”标签：当类和 id 可以相同时如何分隔 CSS 规则？
【发布时间】：2012-03-20 12:43:50
【问题描述】：

我看到浏览器正确呈现了多个 HTML 标记文件。我的意思是像两个 html 文件合并和连接。但是，如果我将 STYLE 区域放入每个 HTML 部分，并且类或 id 相同，我会得到最后的 css 规则也适用于第一部分。我问如何使 css 规则只作用于它们插入的部分，即使类和 id 都是相同的。我需要这个特殊的东西，所以我正在寻找解决方案或技巧。

【问题讨论】：

你应该停止滥用浏览器和寻找这样的伎俩。
首先我需要问一下为什么你在一个文件中有多个html标签。在大多数情况下，当您为每个 ajax 加载页面的一部分但没有真正考虑过要准确加载什么或如何构建加载的部分时，就会发生这种情况。诀窍是不要使用相同的 ID。
每个文档可能有一个 HTML & BODY 标签。如果您不知道，您所拥有的不是有效的 HTML 文档，因此会受到浏览器中未定义的供应商/版本特定行为的影响。告诉我们您为什么需要这样做，我敢打赌有一种合法的方式来实现它。
如果您确实需要在同一个浏览器窗口中显示多个 HTML 页面，请查看 iframe，如果不需要，您需要重新考虑。
CSS 依赖于唯一的 id 来正确呈现。如果合并两个 HTML 文件，它们具有相同的 css id，但使用两个不同的 CSS 模板，那么你就完蛋了。您在做什么需要使用两个完全不同的 HTML 文档但将它们混合在一起？

标签： html css tags

【解决方案1】：

文档中有多个html 标记不是有效的 HTML 代码。无论如何，浏览器都会尝试呈现内容，但单独的 html 部分将简单地混合到一个文档中。

您不能应用单独的样式来分隔 html 部分，因为浏览器不会将 html 部分分开。第一个 html 部分之后的任何内容都将被放入前一个 body 的末尾，并且浏览器会尝试从完全混乱中找出某种意义。

【讨论】：

【解决方案2】：

我认为一个文档中不允许有多个 html-Tags。我认为这样做没有任何好处。

当你有多个文档时，考虑使用frame或者更好的iframe-tag

【讨论】：

【解决方案3】：

HTML 标签和 CSS 规则在行为上完全不同。因此，如果您也合并 html 文件，它将全部作为一个文件。尝试 PHP 包含函数并在另一个 HTML 页面中包含一个 HTML 页面。渲染后，它将充当父级的子级。

所以对于一个单一的 HTML 文件，如果你写多个同名的 CSS 规则，它肯定会崩溃。

【讨论】：

【解决方案4】：

您可以通过用内联代码替换类/ID 来做到这一点。

考虑以下第一个 html 文件：

<html>
<head>
    <style>
        .aclass{
            color: #fff;
        }
    </style>
</head>
<body>
    <a href="#" class="aclass">xyz</a>
</body>
</html>

还有第二个 html 文件：

<html>
<head>
    <style>
        .aclass{
            color: #000;
        }
    </style>
</head>
<body>
    <a href="#" class="aclass">abc</a>
</body>
</html>

现在您可以在两个文件中内联样式，然后将它们合并，最终结果应如下所示：

<html>
<head>
</head>
<body>
    <a href="#" style="color:#fff;">xyz</a>
    <a href="#" style="color:#000;">abc</a>
</body>
</html>

【讨论】：

【解决方案5】：

拥有多个具有相同id 的元素非常容易出错。在多个场合休息，例如

在 javascript 上：document.getElementById('idname');

【讨论】：

【解决方案6】：

您不能将两个 html 标签放在一个 css 文件中。但是您可以将样式标签放在每个 html 文件中，然后您可以从那里引用 html 标签。

例如：假设我有两个文件 home.html 和 login.html

所以在css中可以为一个文件输入一个html标签，而在另一个html文件中我可以简单地把它放在标签中。

这是我为这两个文件制作的一个 css。

html {
    background: #ffffff;
}

所以我在 css 中保留 home.html 的 html 标签的条目，而对于其他我可以像这样写在它自己的 html 文件中

<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="FeedbackManagement.css"/>

<style>html{background: green;}</style>

希望这会有所帮助。请查看这两个文件的背景颜色。

Home.html file

login.html file

【讨论】：