有没有一种方法可以从CSS类中排除一个标签？

Question

有没有一种方法可以从CSS类中排除一个标签？

28

我有一个适用于表格中所有tr标签的css。

因此在我的html中，对于tr标签没有任何样式。但是，对于表格中的一个TR标签，我不想应用于所有表格通用的TR。是否有一种方法可以排除这个TR？

.statisticsTable {
    border:2px solid #990000;
    width:100%;
}
.statisticsTable tr {
    font-weight : bold;
    font-size : 9pt;
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
    color: #ffffff;
    background-color:#990000;

}

<table class="statisticsTable">
   <tr><td colspan="7" class="tableHeaderText">HUB Statistics</td></tr>
   <tr>
      <th colspan="2">HUB</th>
      <th >House Houlds Evaluated</th>
      <th >Total Debt Owed</th>
   </tr>

       <tr  class="<s:if test="#status.even">even</s:if><s:else>odd</s:else>">
           <td  rowspan=3 valign=top>213-65-6425</td>
           <td >All</td>
           <td >t1</td>
           <td >t2</td>

在上面的<tr>中，其类别为'even'或'odd'的我不想要这个<tr>具有.statisticsTable tr属性。这可能吗？

我主要想避免的是background-color: #990000;和color: #ffffff;

- jamie

3个回答

2

在支持CSS3伪选择器的浏览器中（包括大多数浏览器，特别是包括IE7和IE8但不包括IE6），像.statisticsTable tr:not(.even):not(.odd)这样的选择器就可以完成您想要的操作。

- Anonymous

0

你有几个选项，在你的情况下，我能看到最简单的方法是使用进一步的CSS覆盖statisticsTable中的CSS，以达到你想要的在'even'和'odd'类中的样式。

- lsl

我不介意这样做，但是我该如何避免CSS中针对tr标签的其他属性，例如字体加粗、大小为9等等。对于偶数和奇数，我只需要设置背景颜色为白色或灰色。这并不是问题。 - jamie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Presta · Accepted Answer

CSS具有级联特性，这意味着您可以覆盖先前定义属性的值。

您可以这样做：

.statisticsTable tr.even, .statisticsTable tr.odd {
    font-weight: normal;
    font-size: DEFAULT; /* what ever your default is */
    font-family: DEFAULT; /* what ever your default is */
    /* I would use the font shorthand property */
    color: DEFAULT;
    background: DEFAULT;
}

如果您想使用 CSS3，可以使用 :not 仅将下面的样式应用于不具有 even 或 odd class 的 TR 元素：

.statisticsTable tr:not(.even):not(.odd) {
    font: bold 9pt Arial,Helvetica,sans-serif,Verdana,Geneva;
    color: #fff;
    background:#990000;
}

编辑：~~not(.even,.odd)~~不是有效的语法，因此不起作用（至少在Chrome中不起作用）正确的语法是:not(selector)，但是您可以使用:not(selector1):not(selector2)这些not()处于相同的层级。