Scoped CSS样式 - 如何将CSS样式应用于特定的HTML块？

Question

我正在阅读scoped标签的<style>属性，并想知道将样式应用于DOM的特定部分的最佳方法是什么，因为不支持scoped所有浏览器，如果我希望它在chrome中工作，我必须在浏览器中设置一些标志。

查看下面的示例，我的scoped属性不起作用。我可以看到通过在我的CSS中使用更具体的选择器来解决这个问题，但现在我可以说我有一个没有类或任何东西的小部分，但是想要使用样式，它可能会搞砸很多其他我网页上的内容。

<article>
  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

是否有可靠的方法来应用样式块或导入样式表以应用于我的网页上的HTML的特定部分？