HTML文件中的多个"HTML"标签：当类和ID可以相同时，如何分离CSS规则？

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

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

不能将单独的样式应用于单独的html节，因为浏览器不会将html节分开。第一个html部分之后的任何内容都将被放入前一个body的末尾，浏览器试图从这一混乱中获得某种意义。

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

当您有多个文档时，请考虑使用框架或更好的iframe标记

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

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

您可以通过用内联代码替换classes/ids来实现这一点。

考虑以下第一个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>

具有多个具有相同id的元素非常容易出错。多次中断，如

关于javascript:document.getElementById('idname');

不能在一个css文件中放置两个html标记。但是您可以将样式标记放在每个html文件中，并从中引用html标记。

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

所以在css中，In可以为一个文件输入一个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文件

相关内容

最新更新

热门标签：