Question

我有一个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变量中。

Answer 1

您可以使用div将父内容包装在class=wrap中，并在CSS .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>

我希望应用于子页面正文的CSS样式不能影响父页面正文吗？

1 个答案: