小编Fal*_*uit的帖子

作用域 CSS 不起作用并且样式会泄露

我有一个名为“stylesheet.css”的 CSS 文件

p {
    margin: 0%;
    font-family: cursive;
    font-size: 1cm;
}

h1 {
   font-family: sans-serif;
}

Run Code Online (Sandbox Code Playgroud)

我在同一文件夹中有一个 html 文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
    </head>
    <body>
        <p>Test</p>
        <h1>Test</h1>

        <div>
            <style scoped>
                @import "stylesheet.css";
            </style>
            <p>Test (Supposed to be bigger and different font)</p>
            <h1>Test (Should have a different font)</h1>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

但由于某种原因，我在 div 的作用域样式标签中导入的样式规则泄漏到了正文并设置了上面 p 标签的样式：