Question

我在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>

或者我错过了什么？

修改
这不是重新引入内联样式，这三种样式方式中最不受欢迎的吗？

Answer 1

编写HERE新的作用域css指令非常有用，以防您需要在HTML中包含来自外部源代码的一些代码，并且您不希望冒这样的风险，因为您带来的CSS指令会影响您的目前的布局。

即。如果您复制一个带有<style>标记的HTML块，其中包含<head>中包含的与您的名称相同的类，则该类将被您包含/注入的外部代码覆盖

用他们的话说：

“一个常见的用例是联合内容：当您作为网络作者想要合并来自第三方的内容，包括其所有样式，但不想冒这些风格”污染“其他不相关的部分这里的一大优势是能够将来自其他网站（如yelp，twitter，ebay等）的内容组合到一个页面中，而无需使用或动态编辑外部内容来隔离它们。“

Answer 2

当你考虑一个庞大的框架时，问题可能会变得更加清晰，这个框架由许多单独的模块组成，每个模块都引入了一些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）遵循precedence方面与其他样式声明相同的规则，因此您仍然可以覆盖它们外在没有太多麻烦。

新的“范围CSS”有什么用？

2 个答案: