我有 php 页面，其中动态嵌入了另一个 php 页面，两个页面都有应用于其自身正文的样式。
最终的 html 是
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
text-align: center;
background-color: #f00;
}
</style>
</head>
<body>
<div>Text in main body</div>
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
text-align: left;
background-color: #0f0;
}
</style>
</head>
<body>
<div>Text in child body</div>
</body>
</html>
</body>
</html>
我希望应用于子正文的 css 样式不得影响父正文，反之亦然。
我可以编辑主页，只有子页面不在我的控制范围内，子页面的内容存储在 php 变量中。
您可以将父内容包装在div中，并在 css 中class=wrap和样式包装.wrap
注意！这是无效的 html，因为您无法在另一个 HTML 中设置 HTML
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.wrap {
text-align: center;
background-color: #f00;
}
</style>
</head>
<body>
<div class="wrap">Text in main body</div>
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
text-align: left;
background-color: #0f0;
}
</style>
</head>
<body>
<div>Text in child body</div>
</body>
</html>
</body>
</html>