不同颜色的两种款式

对于不同颜色的一种元素，可能会有两种款式吗？不同颜色的两种款式

换句话说，让我们假设我有以下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的一些条件。但我想有两种风格，其中一种应该重写另一种风格。那可能吗？

来源

2012-11-28 Michael Z

你试过吗？其中一个将覆盖另一个。 – Xymostech

是的，我试过了，但是这里有什么逻辑吗？也许它的顺序很重要？什么会覆盖什么？ –

代码中的错字？也许''？ –

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

例如，如果特异性是相同的，最后一个是用于：

.style1 { 
    background: #aaaaaa; 
} 

.style2 { 
    background: #bbbbbb; 
}

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

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

.style2 { 
    background: #bbbbbb; 
}

来源

2012-11-28 20:02:55 bfavaretto

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

来源

2012-11-28 19:58:18

问题是什么算法选择一个下另一个？ –

您可以根据需要为一般或特定元素提供尽可能多的样式定义。哪一个是基于css的特殊性（范围）。你可以在这里阅读更多：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

来源

2012-11-28 19:59:27

是U可以

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

和CSS是你因为在这里

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

来源

2012-11-28 19:59:35

discribed最后定义的样式（而不是类在类属性）应用于你的元素，以回答你的问题。但是如果在某个地方使用！important关键字，结果会让你感到非常奇怪。

来源

2012-11-28 19:59:56 cem

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

来源

2012-11-28 20:03:34

是的，你可以使用一个以上的类的元素，并应用这些类的所有样式规则。

如果规则发生冲突，这是其他大多数特定的覆盖规则。如果规则同样具体，则适用最后一条规则。

实施例：

<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-28 20:04:18 Guffa

不同颜色的两种款式

回答

相关问题