我继承了一个使用 3rd 方网格 Ag-grid 的 AngularJS 项目。有一个 ag-grid-style.css 文件，其中包含以下内容：
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 7) !important;
}
这对于已经使用的网格非常有用，网格很好地分为 7 列。 我的问题是我创建了新代码，也使用 ag-grid，但我需要将新网格分为 6 列，而不是 7 列。我最终得到一个额外的空列。使用 Chrome 进行调试并进入开发人员工具，我可以看到上面的 CSS，如果我将 7 更改为 6，我的网格会完美显示。我的问题是完成我想要的最简单的方法是什么？我一直在尝试调整代码中的样式，但还没有成功。有什么建议吗？
【问题讨论】：
我只需将修改后的 CSS 添加到一个 CSS 文件中，该文件在所有其他第三方库 CSS 文件之后呈现。当你有一个!important 发生在另一个!important 之后，第二个会覆盖第一个。因此，通过将 CSS 添加到您的网站应该没问题。
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 6) !important;
}
【讨论】：
@Adosi 的回答是首选的解决方案——CSS 毕竟是指 cascading 样式表。但是，如果您无法修改样式的加载顺序，则可以使用以下替代解决方案。
您可以通过将您自己的内联定义添加到元素本身来覆盖在具有!important 属性的外部样式表中定义的规则。我在这里使用background-color 属性进行了演示，因为它更明显。
#foo {
background-color: pink !important;
}<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>内联样式总是优先——例如最后加载——所以定义的颜色就是显示的颜色。
请注意，这不是一种好的做法，但如果您无法在第三方资产之后加载 CSS 规则，我会将其作为一种替代方法。 （您可能希望使用 3rd 方库记录错误，因为应谨慎使用 !important 注释，在这种情况下可能根本不用。）
【讨论】：