CSS 规则优先级

我有这个简单的 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>

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

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

http://jsfiddle.net/xNVRm/

最佳答案

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

div.mark {
    margin:30px;
}

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

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

关于CSS 规则优先级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14346538/