13

CSS 沙盒是指布局中具有完全独立外观的部分。我需要这个，因为我的某些类需要在布局中输出一些内容“窗口”，但我不希望应用程序的 css 与它们混淆。它们大多与调试相关，例如打印 var 内容、基准图或显示一些错误/异常。

到目前为止，我一直在进行某种本地重置，但是为了避免冲突，这真的很烦人，如果我忘记了一些规则，可能会失败。前任：

html body div.eh-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    vertical-align: baseline !important;
    background-color: #fff !important;
    font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-bottom: 20px !important;
}

html body div.eh-box * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    color: #333 !important;
}

html body div.eh-box .title {
    font-size: 50px !important;
    line-height: 75px !important;
    /*font-weight: bold !important;*/
}

html body div.eh-box .desc {
    font-size: 24px !important;
    line-height: 36px !important;
}
4

4 回答 4

6

我对此了解不多，但我认为这或多或少是Shadow DOM所做的

于 2013-04-18T14:27:35.527 回答
3

另一种可能的解决方案 - 根据您的应用程序，是加载该布局部分iframe- 这样它是一个完全独立的文档，受一组单独的样式。不确定我是否需要提及使用框架存在某些缺点。

于 2013-04-18T15:12:16.443 回答
1

您可以使用 ID 创建容器元素，然后重置其规则（确保最后加载此部分）。您可能遇到的唯一问题是!important规则，但您也可以在重置部分使用这些规则（不是真正推荐的做法，但它会起作用）。

此外，根据您网站的结构，您可能希望尽可能具体地调用您的容器元素，例如body #top_element #another_top_element #container为了给它更高的优先级，但在大多数情况下，这不是必需的......

于 2013-04-18T02:14:45.400 回答
0

有一种技术叫做Scoped CSS

您不能再使用它 [1]，但是您可以尝试使用 polyfill [2]。

[1] https://caniuse.com/#feat=style-scoped

[2] https://github.com/PM5544/scoped-polyfill

于 2020-01-07T17:40:03.357 回答