css - CSS类顺序

Question

我有一个带有多个 div 和“a”标签的主“div”，我想设置一个“类似模板”的 css 以使它们看起来都一样，但是一些 A 标签需要不同，所以我想制作它像这样：

<div class="main">
   <a href="#" class="exception">CLick A</a>
   <br/>
   <a href="#">CLick B</a>
   <br/>
   <a href="#">CLick C</a>
   ....
</div>​

在CSS上：

.main a{
  /* Links Scheme */
}

.exception{
 /* particular link css */
}​

但是浏览器优先选择我的“模板”而不是特定的类。课程不应该是最重要的还是我错过了什么？

小提琴链接

PS：请不要使用“！important”标签

Answer 1

这是一个特殊性的问题。由于.main a包含一个类和一个标签名，它更具体，因此比仅仅一个类名具有更高的优先级。

因此，要解决它，请使用.main .exception您的异常。

Answer 2

.main a 比 .exception 更具体。我认为你的目标是：

.main a{
  /* Links Scheme */
}

.main a.exception{
 /* particular link css */
}​

Answer 3

在 css 中，顺序也取决于选择器的具体程度，因此请尝试更改.exception为.main a.exception.

jsFiddle：http: //jsfiddle.net/jdwire/DFNyW/2/