1

是否可以为具有不同颜色的一个元素提供两种样式？

换句话说，假设我有以下 HTML 代码：

<table class='my_table'>
<th class="style1 style2">LastName</th>
...
</table>

并遵循CSS：

.my_table th.style1 { 
    background: #aaaaaa; 
}

.my_table th.style2 { 
    background: #bbbbbb; 
}

我知道我可以在某些条件下使用 JavaScript 删除一种样式。但我想有两种风格，其中一种应该覆盖另一种。那可能吗？

4

7 回答 7

1

最后定义的样式（不是类属性中的类）应应用于您的元素，以回答您的问题。但是，如果在某个地方使用了 !important 关键字，结果可能会让您感到很奇怪。

于 2012-11-28T19:59:56.243 回答
1

是的，您可以在一个元素上使用任意数量的类。CSS 使用声明顺序和选择器的特殊性来决定哪些将被覆盖。

例如，如果特异性相同，则使用最后一个：

.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
}

否则，将使用最具体的（以下示例中的第一个）：

.my_table th.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
}
于 2012-11-28T20:02:55.157 回答
1

是的，您可以为一个元素使用多个类，并且应用这些类的所有样式规则。

如果规则冲突，则最具体的规则会覆盖另一个规则。如果规则同样具体，则适用最后一条规则。

例子：

<table class="my_table">
    <tr>
        <th class="style1">Style 1</th>
        <th class="style2">Style 2</th>
        <th class="style1 style2">Style 1 and 2</th>
    </tr>
</table>

第三个单元格将从 中获取背景style2，因为它是在样式表中最后定义的。

演示：http: //jsfiddle.net/jsLP5/

于 2012-11-28T20:04:18.730 回答
0

是的，您可以将多个类应用于一个元素，如果相同 CSS 元素存在相互竞争的定义，那么其中一个将覆盖另一个。

于 2012-11-28T19:58:18.070 回答
0

一般来说，您可以拥有任意数量的样式定义或特定元素。使用哪一个取决于 css 特异性（范围）。你可以在这里阅读更多：http: //coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-11-28T19:59:27.993 回答
0

是的你可以

       <th class="style1 style2">LastName</th>

和这里描述的css是你的

http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm

于 2012-11-28T19:59:35.863 回答
0

对于给定的代码，使用的背景颜色是#bbbbbb，因为其他条件相同，就像这里一样，后一个声明通过级联规则获胜。这意味着 CSS 声明的顺序。属性中类名的顺序class无关紧要。

于 2012-11-28T20:03:34.750 回答