Question

我正在将Ext 3.x中的现有应用程序更新为4，并且我已设法启用Ext的作用域重置CSS选项以防止Ext将CSS重置应用于我的整个应用程序，但是我是现在遇到另一个问题。我的应用程序使用了很多硬编码的，非ext生成的HTML和CSS样式，其中大部分包含在Ext组件（面板，tabpanels等）中。显然，由于这个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中的所有不同元素都没有相同的边距和填充，所以我不能像我对盒子一样覆盖这些样式 - 浆纱。并且这个规则优先于我的大多数自定义CSS样式的原因是因为它本身具有比CSS类更高的特异性。即“.x-reset div”选择器的margin / padding样式会覆盖“.my-cool-class {padding：5px; margin：5px;}”等规则的覆盖范围。

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

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

Answer 1

你可以从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
}

覆盖ExtJS 4的CSS重置，以便在组件中自定义HTML

1 个答案: