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

Question

任何人都可以建议我一种方式来区分具有相同类别的2个标签吗？

我有2张桌子

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

第一个表是页面上的jqgrid，第二个表标签有弹出窗口内的jqgrid.now我想要对jqgrids的顶部（标签/列）行进行不同的样式。但每当我申请时申请风格

.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代码段中的情况并非如此

Answer 2

如果这适合你

<强> HTML

<table id="tab1" class="ui-jqgrid ui-jqgrid-htable">
<table id="tab2" class="ui-jqgrid ui-jqgrid-htable anotherClass">

<强> CSS

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

.ui-jqgrid.ui-jqgrid-htable.anotherClass th{
    /* some different styles*/
}

同时删除class=".ui-jqgrid .ui-jqgrid-hbox"类名称中的点。检查演示，第二个表有不同的颜色字体。

DEMO.

Answer 3

#tab1{
  padding: 5px;
}
#tab2{
  padding: 2px;
}

我本来一直在使用css中的id。

Answer 4

如果我们谈论jqGrid，那么了解我们最初指定<table>元素非常重要

<table id="list"></table>

将动态转换为相对复杂的结构，其中包含不同的div和表，其中包含以下内容

使用.ui-jqgrid .ui-jqgrid-htable th div {...}指定CSS，您可以更改网格的*列标题的格式。如果您有两个网格，如

<table id="grid1"></table>
<table id="grid2"></table>

并且想要为列标题指定CSS 只有一个网格然后你ID为外部div＆＃34; gbox＆＃34;或＆＃34; gview＆＃34;将根据<table>元素的id构建。例如，要将您需要的CSS应用于网格#grid1，只能使用

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

我使用ui-jqgrid-labels的{​​{1}}课代替<tr>，以确保即使您在网格中searching toolbar，也只应在列标题上应用CSS。