css使用什么来进行隔绝外界的布局？

Question

css使用什么来进行隔绝外界的布局？

我们知道css的布局样式很复杂，

例如：

<div id="1">
    <div id="2">
        <div id="4">
        </div>
        <div id="5">
        </div>
    </div>
    <div id="3">
    </div>
</div>

问题1：
div#1 使用flex布局，那么div#2, div#3, div#4, div#5 都会被影响，
有什么方式可以进行隔离开来呢？

比如：div#1里面的第一层子元素使用div#1的布局规则，div#2里面的第一层子元素使用div#2的布局规则。

问题2：
全局的样式表，是否会影响全局的所有HTML元素？有没有方法屏蔽/隔离掉全局样式呢？

Answer 1

.container * {
    all: initial;
}

用通配符配合 all: initial 或者 all: revert;
initial 是 css 标准规范规定的初始值，revert 是浏览器默认值，具体用哪个看需求。
一般情况，尽量不要使用通配符，有一丢丢性能问题，特殊需求除外。
demo:
https://codepen.io/cuteyangya...

或者用shadowDOM
https://developer.mozilla.org...

Answer 2

1. 没有办法将他们隔离，需要自己控制要CSS的应用范围，尽量少使用 element 标签来匹配。
2. 全局的样式会影响所有的HTML元素，如果没有控制要应用范围的话。比如说 Reset.css 和 Nomalize.css 这种样式重置CSS，以及你的UI库主题样式这类的，都会全局应用。

并不能屏蔽全局样式，CSS只是样式表，并不是可执行的程序，所以在设计全局样式的时候需要控制应用范围。
在以前没有 CSS Module 和 Scope CSS 这种概念的时候，都是通过 BEM 规范来设计 ClassName 来达到限制样式应用范围。

---

相关阅读

CSS Modules 用法教程 - 阮一峰的网络日志
如何理解Scoped CSS - 知乎
CSS-BEM 命名规范