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

Question

作用域 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 标签的样式：

Answer 1

Que*_*tin 5

浏览器不支持scoped该功能已被弃用。

即使他们确实支持它，您的 CSS 也会以该元素为目标，并且您将 CSS 范围限定到的内部body没有元素（也不可能，因为那里不允许有元素）。bodydivbody

编写 CSS 以定位您实际拥有的元素。

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

Run Code Online (Sandbox Code Playgroud)

<p>Test</p>

<div id="scopeTarget">
  <p>Test (Supposed to be bigger and different font)</p>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，8 月前
查看次数：	1206 次
最近记录：	3 年，8 月前