如何覆盖子元素的样式设置？

Question

我正在使用 javascript 网格插件（jqWidget 的网格）。它允许我在定义单元格的列时将自定义样式应用于单元格：

{ "text": i, "width": 1, "cellclassname": "custom-column" }

这对我很有用，因为我正试图将列的宽度减小到恰好 1em。

.custom-column {
     width: 1em;
}

不幸的是，他们在每个单元格中包含了一个没有 ID 或 class 的额外 DIV：

<div role="gridcell" style="left: 725px; z-index: 1171; width:25px;" class="jqx-grid-cell jqx-item custom-column">
   <div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">M</div>
</div>

在上面的 HTML 中，您可以看到我的自定义 class custom-column 但是插入的子项 DIV 包括填充和边距，我认为这会影响网格单元格使它比 1em 大得多（看起来更接近 3em）。

我可以在我的 custom-column class 中添加什么来覆盖或抵消子项中的填充和边距设置吗？

更新：更改后的更多信息

根据评论和第一个答案，我将自定义 class 更改为如下所示：

.custom-column > div {
   width: 1em;
   margin: 0;
   padding: 0;
}

据我所知，这没有区别。我附上了 Chrome 调试工具的屏幕截图，我希望它能显示足够的信息来提供帮助。

Answer 1

只需添加此 CSS 规则：

.custom-column > div{
    margin: 0 !important;
    padding: 0 !important;
}

如果 div 不是直系子代，请将 > 替换为空白 space。

您必须在每条规则后添加关键字 !important，因为样式位于 div 元素内。

注意：但是添加太多这条规则并不是一个好的做法。

如何覆盖子元素的样式设置？

How can I override a child element's style settings?

html

css

jqxgrid