css - 为什么 jqgrid css 中有这么多 !important 规则？

Question

我正在使用 jqgrid-4.5.4。我想在 jqgrid 上应用我的应用程序的主题，因此尝试覆盖下面的一些 css 和更多:

Original :
.ui-jqgrid .ui-jqgrid-hdiv {
    border-left: 0 none !important;
    border-right: 0 none !important;
    border-top: 0 none !important;
    margin:     
    overflow-x: hidden;
    padding: 0;
    position: relative;
}
My theme :
.ui-jqgrid .ui-jqgrid-hdiv {
    border: 1px solid #dedede; 
}

但由于 ui.jqgrid.css 中许多地方的 !important 规则，我无法不编辑原始 jqgrid 的 css 文件。

疑问1.为什么css文件包含这么多!important规则？

查询 2。我的想法是保持原始文件不变，并将覆盖的 css 放在一个单独的文件中，所以当我升级 jqgrid 时，只检查主题文件中的更改并更新它会更容易，而不是寻找新旧 jqgrid'css 文件之间的差异。我是这样做的还是其他想法？

谢谢。

Answer 1

我在我的代码中覆盖了几个 jQGrid CSS 规则。

只需包含您自己的自定义 CSS 文件在您包含 jQGrid CSS 文件并使用 !important。

包括示例:

<!-- jQGrid CSS -->
<link href="Content/ui.jqgrid.css" rel="stylesheet" />

<!-- My Custom CSS Included AFTER the jQGrid CSS -->
<link href="Content/global.css" rel="stylesheet" />

在我的自定义 CSS 文件中，我有如下规则:

.navtable .ui-pg-button .ui-pg-div {
    margin: 0 8px 0 8px !important;
}

这将覆盖 jQGrid 默认样式，因为它在我的自定义 CSS 文件中，包含在 AFTER jQGrid CSS 文件中。