Question

对于一个具有不同颜色的元素，可以有两种样式吗？

换句话说，假设我有以下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删除一种样式。但我希望有两种风格，其中一种应该覆盖另一种风格。这可能吗？

Answer 1

应该在元素上应用最后定义的样式（不是类属性中的类）来回答您的问题。但是，如果某处使用了！important关键字，那么结果可能会让你感到非常奇怪。

Answer 2

是的，您可以在元素上使用任意数量的类。 CSS使用声明顺序和specificity of the selectors来决定哪个将被覆盖。

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

.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
}

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

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

.style2 { 
    background: #bbbbbb; 
}

Answer 3

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

如果规则发生冲突，则最具体的规则会覆盖另一个规则。如果规则具有同等效力，则适用最后一条规则。

示例：

<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/

Answer 4

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

Answer 5

您可以根据需要为特定元素添加任意数量的样式定义。使用哪一个是基于css特异性（范围）。您可以在此处阅读更多内容：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 6

是的，你可以

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

而css是你的正如它在这里描述的那样

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

Answer 7

对于给定的代码，使用的背景颜色是#bbbbbb，因为其他条件相同，因为它们在这里，后者声明由cascade rules获胜。这意味着CSS声明的顺序。 class属性中的类名顺序并不重要。

两种不同颜色的款式

7 个答案: