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

【问题标题】：How to apply different style to different tags which has same class?如何将不同的样式应用于具有相同类的不同标签？
【发布时间】：2013-05-27 22:06:09
【问题描述】：

谁能给我建议一种不同样式的方法来设置具有相同类的 2 个标签？

我有两张桌子

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

第一个表是页面上的 jqgrid，第二个表标签有 jqgrid，它位于弹出窗口内。现在我想对两个 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;
}

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

【问题讨论】：

您必须在第二个表中找到与第一个表不同的内容。可能是父元素上的一个类。
看看:first-child 和:nth-child() 选择器：api.jquery.com/first-child-selector
看这个例子jsfiddle.net/mowglisanu/Rz2Qt
i have 2 divs 但<table id="tab1" class=".ui-jqgrid .ui-jqgrid-hbox"> 对我来说似乎很合适。
@SheikhHeera 我做了更改。感谢您指出

标签： javascript jquery html css jqgrid

【解决方案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 sn-p 中的大小写

【讨论】：

实际上我确实尝试过这样的事情，但它不起作用的原因是它需要 jqgrid 的 ui-jqgrid-htable 类
不熟悉 jqgrid，但我不明白为什么您需要在 css 中使用类名。我的建议适用于您提供的 HTML，这应该是所有 js 所看到的，它与您的样式表无关。但如果你坚持你也可以使用#tab1.ui-jqgrid.ui-jqgrid-htable th div等等...

【解决方案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，第二个表有不同的颜色字体。

DEMO.

【讨论】：

当我更改类时，由于某种原因样式不生效
你有.ui-jqgrid .ui-jqgrid-hbox，删除点并确保类相同。
我认为您在这里遇到了级联问题，.ui-jqgrid.ui-jqgrid-htable th 将优先于 .anotherClass。您必须使用 .ui-jqgrid.ui-jqgrid-htable.anotherClass th 之类的东西作为选择器才能处理您在两个选择器中声明的样式。
我更新了你的演示（html 错了两个）来证明我的观点：jsfiddle.net/5TyHu/3
np，级联有时会很棘手。这就是为什么我建议使用已经存在的 id 的原因，因为它们在级联顺序中具有优先级，并且它使您的选择器更加简洁（并且性能更高！）

【解决方案3】：

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

我会一直在 css 中使用id。

【讨论】：

【解决方案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只有一个网格然后你的外部 div“gbox”或“gview”的 id 将基于 <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;
}

我使用 <tr> 的 ui-jqgrid-labels 类而不是 ui-jqgrid-htable 来确保 CSS 仅应用于列标题，即使您在网格中 searching toolbar 也是如此。

【讨论】：