javascript - 如何将不同的样式应用于具有相同类的不同标签？

Question

任何人都可以建议我一种方法来为具有相同类的 2 个标签设置不同的样式吗？

我有两张 table

<table id="tab1" class=".ui-jqgrid .ui-jqgrid-hbox">
<table id="tab2" class=".ui-jqgrid .ui-jqgrid-hbox">

第一个表是页面上的 jqgrid，第二个表标签有弹出窗口内的 jqgrid。现在我想对两个 jqgrid 的顶部(标签/列)行设置不同的样式。但是每当我申请应用样式

.ui-jqgrid .ui-jqgrid-htable th div {
    height: auto;
    overflow: hidden;
    padding-right: 4px;
    padding-top: 2px;
    position: relative;
    vertical-align: text-top;
    white-space: normal !important;
}

它影响两个表格标签。我希望它影响第一个标签，我想将相同的样式应用于其他表格标签但具有额外的属性。请帮助谢谢

Answer 1

为什么不保持简单，只使用 id 呢？像这样:

.ui-jqgrid.ui-jqgrid-htable th div {
    /* applies to both tables */
}
#tab1 th div {
    /* applies only to table 1 */
}
#tab2 th div {
    /* applies only to table 2 */
}

还是我误解了这个问题？

请注意，我还删除了两个类选择器 (.ui-jqgrid.ui-jqgrid-htable) 之间的空格，因为您编写它的方式 .ui-jqgrid-htable 在应用之前必须是 .ui-jqgrid 的子级，而在您的 HTML 代码段中并非如此