覆盖 ExtJS 4 的 CSS 重置以在组件内自定义 HTML
我正在将现有应用程序从 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]
这个属性并不是什么大问题，我所要做的就是创建自己的重置包装类，将框大小更改回“内容框”并应用该类到我的自定义 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”选择器的边距/填充样式会覆盖“.my-cool-class { padding: 5px; margin:5px; } ”之类的规则。
为了克服这个问题，我自然可以更新我的自定义 CSS，通过在类选择器中添加其目标元素类型（“div.my-cool-class”）前缀或在规则中添加 .x- 前缀来为规则提供更高的特异性。重置（“.x-reset .my-cool-class”），但是这些选项中的任何一个都需要对已经存在的大量自定义CSS进行大量手动更新，更不用说添加文件大小并限制CSS 类。
那么有没有什么方法可以通过 Ext 的设置，或者通过其他一些我只是忽略的 CSS 解决方案，可以优雅地解决这个问题，并且希望不会有太多的开销？
I am in the process of updating an existing application from Ext 3.x to 4, and I've managed to enable Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application, however I'm now encountering another issue. My application uses alot of hardcoded, non-ext generated HTML and CSS styles, much of which is contained within Ext component's (panels, tabpanels, ect.) Obviously, since this html is a descendent of the ext component's containing elements, it inherits the CSS reset styling. And as a result, totally jack up the custom styling of the non-Ext html.
Specifically there are two CSS rules which are causing the issues:
.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]
This property was not much of an issue, all I had to do was create my own reset wrapper class that changed the box-sizing back to 'content-box' and apply that class to the topmost wrapper element in my custom html. That rule is as follows:
.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;}
However the other CSS rule is what is not so simple to negate:
.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;}
The reason this rule is so troublesome is that all the different elements in my custom HTML are not going to have the same margin and padding, so I can't just override these styles in the same way I did for the box-sizing. And the reason that this rule takes precedence over the vast majority of my custom CSS style's is because it has a higher specificity than a CSS class by itself. I.e. the ".x-reset div" selector's margin/padding styles overrides that of a rule like ".my-cool-class { padding: 5px; margin:5px; } " for ''.
To overcome this, naturally I could update my custom css to give the rules higher specificity by either prefixing class selectors with the type of element it is targeting ("div.my-cool-class") or by prefixing the rules with .x-reset (".x-reset .my-cool-class"), however either of these options would require alot of manual updating of a great deal of custom css that already exists, not to mention adding to filesize, and limiting the modularity of the CSS classes.
So is there any way via Ext's settings, or maybe via some other CSS solution that I am just merely overlooking that could solve this problem elegantly and hopefully with not too much overhead?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以从 extjs css 中删除特异性，这样您的 css 如果随后包含，将会“获胜”。
所以将：转换
为：
}
然后你的CSS将适用
You could remove the specificity from the extjs css, that way your css if included afterwards would "win".
So convert:
to:
}
then your css will apply