CSS 规则优先级

Question

我有这个简单的 CSS:

.cont div {

  margin:10px;
  border:1px solid;
}

.mark {   /* This get ignored? */

 margin:30px;
}

使用这个标记:

<div class="cont">
  <div>a</div>
  <div class="mark">b</div>
</div>

我除了 div.mark 有 margin:30px; 但至少在 Chrome 中这不是真的，因为通用规则 .cont div 似乎有更高的优先级。

考虑到我不想使用 !important 还有其他方法可以解决这个问题吗？

http://jsfiddle.net/xNVRm/

Answer 1

只需通过添加标签名称让您的选择器更加具体:

div.mark {
    margin:30px;
}

演示:http://jsfiddle.net/xNVRm/1/

如果你想避免使用标签名称，你也可以使用 .cont .mark。