1

我正在将现有应用程序从 Ext 3.x 更新到 4，并且我已经设法启用 Ext 的作用域重置 CSS 选项以防止 Ext 将其 CSS 重置应用于我的整个应用程序，但是我现在遇到了另一个问题。我的应用程序使用了很多硬编码的、非 ext 生成的 HTML 和 CSS 样式，其中大部分包含在 Ext 组件（面板、选项卡面板等）中。显然，由于这个 html 是 ext 组件的包含元素的后代，它继承了CSS 重置样式。结果，完全提升了非 Ext html 的自定义样式。

具体来说，有两个 CSS 规则会导致问题：

.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}[/php]

这个属性不是什么大问题，我所要做的就是创建我自己的重置包装类，将 box-sizing 改回“content-box”，并将该类应用于我的自定义 html 中最顶层的包装元素。该规则如下：

.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * {    box-sizing: content-box;    -moz-box-sizing: content-box;    -ms-box-sizing: content-box;    -webkit-box-sizing: content-box;}

然而，另一个 CSS 规则并不那么容易否定：

.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;}

这条规则如此麻烦的原因是我的自定义 HTML 中的所有不同元素都不会有相同的边距和填充，所以我不能像我为 box-sizing 所做的那样覆盖这些样式。这条规则优先于我的绝大多数自定义 CSS 样式的原因是因为它比 CSS 类本身具有更高的特异性。即“.x-reset div”选择器的边距/填充样式会覆盖“.my-cool-class { padding: 5px; margin:5px; }” for '' 之类的规则。

为了克服这个问题，我自然可以更新我的自定义 css 以通过在类选择器前面加上它所针对的元素类型（“div.my-cool-class”）或通过在规则前面加上 .x- 来赋予规则更高的特异性reset (".x-reset .my-cool-class")，但是这些选项中的任何一个都需要手动更新大量已经存在的自定义 css，更不用说增加文件大小和限制CSS 类。

那么有什么方法可以通过 Ext 的设置，或者通过其他一些我只是忽略的 CSS 解决方案，可以优雅地解决这个问题，并且希望没有太多的开销？

4

1 回答 1

5

您可以从 extjs css 中删除特殊性，这样您的 css 如果之后包含将“获胜”。

所以转换：

.x-reset html, .x-reset body, .x-reset div, 
.x-reset dl, .x-reset dt, .x-reset dd, 
.x-reset ul, .x-reset ol, .x-reset li, 
.x-reset h1, .x-reset h2, .x-reset h3, 
.x-reset h4, .x-reset h5, .x-reset h6, 
.x-reset pre, .x-reset code, .x-reset form, 
.x-reset fieldset, .x-reset legend, .x-reset input, 
.x-reset textarea, .x-reset p, .x-reset blockquote, 
.x-reset th, .x-reset td {
  margin: 0;
  padding: 0;
}

至：

html,  body,  div, 
dl,  dt,  dd, 
ul,  ol,  li, 
h1,  h2,  h3, 
h4,  h5,  h6, 
pre,  code,  form, 
fieldset,  legend,  input, 
textarea,  p,  blockquote, 
th,  td {
 margin: 0;
 padding: 0;

}

那么你的CSS将适用

.myPadding{
  padding: 10px
}
于 2011-11-16T22:39:16.717 回答