CDNのスタイルシートを一部にだけ使うには？

Question

複数のスタイルシートを一つのページに混在させようと思っています。

単純にCDNのlinkタグを全部ヘッドに入れると、思った通りの動作をしません。

そこで、一つのdiv要素か何かにスタイルシートの影響範囲を制限した上で使いたいのですが、このようなことはできますか？

つまり、ヘッドに <link rel="stylesheet" href="https://style1.min.css"> と書いてstyle1.min.cssを全体に使いつつ、ページ内のあるdiv要素の中でのみ<link rel="stylesheet" href="https://style2.min.css"> とやってstyle2.min.cssで上書きするということです。

Answer 1

scoped属性というものが考えられていたことがありましたが、結局勧告に至らず廃止されています。古い Firefox があるなら試してみてはどうでしょうか？

  <div>
   <style scoped="scoped">
     @import "style2.css";
   </style>
   style2.cssはここだけに適用される……はずでした
  </div>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/style#Deprecated_attributes
https://caniuse.com/#feat=style-scoped
https://hyper-text.org/archives/2013/02/style_scoped_attr.shtml

現状ではどこに書いてもdocument全体に適用されるため、どうしてもしたい場合は iframe を使うなどでしょうか？

Answer 2

出来ますよ。
「あるdiv要素」のみを「style2.css」に記述しておけば、記述順により、そのページでのみ適用されます。