新的“作用域CSS”有什么用？
我在caniuse.com上发现了这个问题，我想知道它解决了哪些问题不能用当前的CSS来解决。例如,
<div>
<style scoped>
h1 { color: FireBrick; }
p { color: SaddleBrown; }
</style>
<h1>This is an H1 in a scoped div.
Regardless of global styles the text should be "FireBrick".
</h1>
<p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph,
that will unaffected by the scoped style and remain black.</p>可以很容易地
<style>
div.scoped h1 { color: FireBrick; }
div.scoped p { color: SaddleBrown; }
</style>
<div class="scoped">
<h1>This is an H1 without scoped div.
Regardless of global styles the text should be "FireBrick".
</h1>
<p>This is a paragraph without scoped div.
The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph,
that will unaffected by the scoped style and remain black.</p>还是我漏掉了什么？
编辑
这难道不是重新引入内联样式，这是三种样式方式中最不受欢迎的吗？
回答 2
Stack Overflow用户
发布于 2014-01-22 12:13:46
作为编写的这里，新的作用域css指令非常有用，如果您需要在HTML中包含来自外部源的一些代码，并且您不想冒您引入的CSS指令影响当前布局的风险。
也就是说，如果您使用包含在<style>中的同名类的<head>标记复制一个HTML块，则该类将被包含/注入的外部代码覆盖。
用他们的话：
“一个常见的用例是联合内容:当你作为一个网络作者想要整合第三方的内容，包括它的所有风格，但不想冒那些样式”污染“页面中其他无关部分的风险时。这里的一个巨大优势是能够将来自其他网站的内容(如yelp、twitter、ebay等)合并到一个页面中，而无需使用外部内容进行编辑或快速编辑。”
Stack Overflow用户
发布于 2014-01-22 12:11:59
当您考虑到一个庞大的框架时，这个问题可能会变得更清楚，这个框架由许多独立的模块组成，每个模块都引入了一些HTML片段，这些片段最终被组装成最终的html。
在开发模块时，您可能无法判断其他开发人员是否有相同的想法，并使用类似于您的示例scoped的类来限制它们的CSS样式的范围。突然，您的模块正在覆盖来自完全不同模块的样式。
使用scoped属性，您可以确保样式仅限于您实际想要瞄准的dom的那一部分。
坏：
<head>
<style>
div.scoped p { color: SaddleBrown; }
</style>
</head>
<body>
<div class="scoped module-1">
<p>will be affected</p>
</div>
<!-- ... more markup -->
<div class="module-2 scoped">
<p>will also be affected</p>
</div>好：
<head>
<style>
div p { color: SaddleBrown; }
</style>
</head>
<body>
<div class="module-1">
<p>will be SaddleBrown</p>
</div>
<!-- ... more markup -->
<div class="module-2">
<style scoped>
/* appears later in the markup, so will override per law of cascading */
div p { color: #bada55; }
</style>
<p>will be #bada55 !</p>
</div>不，这些不是内联样式，因为它是: 1)仍然是一个单独的样式块，2)在优先方面遵守与其他样式声明相同的规则，因此您仍然能够在外部轻松地覆盖它们。
https://stackoverflow.com/questions/21282532
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号