javascript - 元素可以使用外部 CSS 设置样式吗

Question

外部 CSS 文件全局应用于引用 HTML 页面。是否可以限制范围。

我知道我可以做 .myCssClass 等，但是对于这个元素，我将需要在一页中使用 2 种截然不同的样式。考虑 2 个 div，其中一个使用 CSS 样式表 1，另一个使用样式表 2(并且该站点还将有正统的 CSS)。

样式表也将用于其他地方，所以我无法编辑 CSS。按元素共享外部 CSS 是个不错的主意。有点像

<div stylesheet="../style.css">content 1</div>

<div stylesheet="../style2.css">content 2</div>

这可能吗？

Answer 1

您可以使用 scoped 属性，但不幸的是它只被 Firefox 支持。因此，id 和 classes 是最好的、公认的、认可的和通用的解决方案。

<div>
  <style scoped>
    h1 {color:red;}
    p {color:blue;} 
  </style>
  <h1>Heading</h1>
  <p>hello world! I'm of blue color!</p>
</div>
<p>I'm out of the scope, so I'm of the black color :(</p>