是否可将不同CSS样式表分区应用于页面指定的元素范围

完全可以实现，目前有两种成熟的落地方案，适配你提到的两类场景：

方案1：CSS命名空间包裹（兼容性最高，优先推荐） #

这种方案可维护性强，不会受后续DOM结构调整影响：

• 先给页面两个分区分别套独立的父容器：红框上方的区域统一包裹在带.bootstrap-outer类名的父元素下，红框以内的区域统一包裹在带.inner-area类名的父元素下
• 针对场景1（两套不同配置的Bootstrap）：编译内层Bootstrap样式时，开启命名空间配置，给所有内层Bootstrap的选择器自动加上.inner-area前缀。如果用Sass编译Bootstrap，只需要把Bootstrap源码引入到命名空间块内即可：

  .inner-area {
    @import "bootstrap/scss/bootstrap";
  }
  

  编译后原生Bootstrap的按钮样式.btn { padding: 6px 12px; }会自动变成.inner-area .btn { padding: 6px 12px; }，自然只会作用于内层区域，和外层Bootstrap样式完全隔离
• 针对场景2（外层Bootstrap+内层Material）：同样给Material的所有样式规则添加.inner-area前缀即可，大部分主流UI组件库都内置了全局前缀配置项，无需手动修改源码

方案2：Shadow DOM（完全隔离，适合跨框架混用场景） #

如果要求内层区域和外层样式100%不互相渗透，可以用Shadow DOM将内层内容完全包裹：

• 把内层的DOM结构和对应的样式表都挂载到Shadow Root下，Shadow DOM的样式天然和外层主文档DOM隔离，外层的Bootstrap样式不会影响内层，内层的Material样式也不会泄露到外层，尤其适合场景2这种完全不同的UI体系混用的情况

注意事项：不要使用+/~这类兄弟选择器来限定样式作用区域，只要后续DOM节点顺序有变动就会导致样式失效，父容器包裹的方式稳定性最高。

内容的提问来源于stack exchange，提问作者Matthew Layton