CSS 有没有办法从css类中排除标签
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/800304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is there a way to exclude a tag from css class
提问by Nick Presta
I have css that works on all tr tags for the table.
我有适用于表格的所有 tr 标签的 css。
so in my html I have no styling for tr tag. However, for one TR tag in my table I do not want to apply the TR that is generic to all tables. Is there a way to exclude this TR?
所以在我的 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>
in above the <tr>
that has class of either 'even' or 'odd' I do not want this <tr>
to have .statisticsTable tr properties. is this possible?
在上面<tr>
具有“偶数”或“奇数”类的我不希望它<tr>
具有 .statisticsTable tr 属性。这可能吗?
Main think I want to avoid is background-color: #990000; and color: #ffffff;
我想避免的主要想法是 background-color: #990000; 和颜色:#ffffff;
回答by Nick Presta
CSS cascades, meaning you can overwrite the values of previously defined properties.
CSS 级联,这意味着您可以覆盖先前定义的属性的值。
You would do:
你会这样做:
.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;
}
If you want to use CSS3, you can use :notto only apply the following styles to TR elements which don't have the even or odd class:
如果您想使用 CSS3,您可以使用:not将以下样式仅应用于没有偶数或奇数类的 TR 元素:
.statisticsTable tr:not(.even):not(.odd) {
font: bold 9pt Arial,Helvetica,sans-serif,Verdana,Geneva;
color: #fff;
background:#990000;
}
EDIT:not(.even,.odd)is not valid syntax thus will not work (at least not in Chrome)
correct syntax is :not(selector) , however you can do :not(selector1):not(selector2) these not()s are on the same level.
编辑:not(.even,.odd)不是有效的语法,因此不会工作(至少不是在 Chrome 中)正确的语法是 :not(selector) ,但是你可以这样做 :not(selector1):not(selector2) 这些不是() 处于同一级别。
回答by Anonymous
In a browser that supports CSS3 pseudo-selectors (this includes most browsers, notably inluding IE7 and IE88 and not IE6), a selector like .statisticsTable tr:not(.even):not(.odd) for that second rule grouping would do what you want.
在支持 CSS3 伪选择器的浏览器中(这包括大多数浏览器,特别是包括 IE7 和 IE88 而不是 IE6),像 .statisticsTable tr:not(.even):not(.odd) 这样的选择器可以用于第二个规则分组你想要什么。
回答by Louis
You have a few options, the easiest I can see in your situation is override the CSS in statisticsTable with further CSS to the style you want in the classes 'even' and 'odd'.
您有几个选择,在您的情况下,我能看到的最简单的方法是使用更多 CSS 覆盖 statisticsTable 中的 CSS,使其成为您在“偶数”和“奇数”类中所需的样式。