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>

A.
B

I除具有

边距的div.mark:30px外

但至少在Chrome中不是这样，因为通用规则

.cont div

似乎具有更高的优先级

考虑到我不想使用

！重要信息

是否有其他方法解决此问题

---

只需添加标记名，使选择器更加具体：

div.mark {
    margin:30px;
}

演示：

---

如果要避免使用标记名，也可以使用

.cont.mark

。

为了避免使用重要的

标记，您需要使css选择器更加具体。您可以使用
.cont div.mark
。它比div.mark更具体。
特定性是CSS规则如何获得优先顺序的关键。请尝试从HTML Dog查看这篇文章：


您可以改为使用
div.mark
，这意味着任何具有mark类的div都可以这样做。
由于“.cont div”声明实际上更具体，所以它会覆盖“.mark”声明。CSS使用一种点系统来确定应用哪些规则。在您的例子中，“.cont div”指定一个类和其中的一个元素，而“.mark”只指定一个类

有关所有合规浏览器应使用的确切规则，请参阅以下链接：

在您的情况下，您可以通过在第二次声明中使用“.cont.mark”来修复此问题。
再次查看此内容，我发现我不明白您试图做什么。我想我现在明白了

你是说，任何一个类中的div.cont都有10px的余量。那就更具体了，马克。马克是30px，但它是一个div，在.cont里面，所以它是10px。它从右到左读——这是一种思考和检查特异性的好方法

我开始用一种更面向对象的方法来思考问题。你认为这种方法怎么样



HTML

SASS会让这更容易

这个例子的一个例子

在更大的范围内
同样-空白在白色背景上是一个不好的例子。我们所知道的一切可能都有余地。使用填充和背景色进行测试。只需将div从你的CSS中划掉，问题标记就是一个例子。当然，我在
.cont
中有两个以上的div，所有的div都在.cont中，除了那些。markYes。很难猜测您的用例。但是什么divs。cont是我猜的一个容器：所以我不会在这些容器上留空白。。。我会在，.cont p，.cont.thing{margin:10px}内重复使用//.div，并保持容器的样式独立等。div.mark{}回答了这个问题-但从长远来看，我认为这会导致您做更多的工作。.cont div{已经是div了。我很想知道一个例子，在这个例子中，放置div是有用的。这是真的，但我认为没有必要这么具体。马克已经很完美了。.cont div是问题所在。或者，他可以只使用该类而不使用.cont类的div声明。在父级（.cont-div）上实现所有功能的特殊性。
<div class="container section01">
  <div class="block a">a</div>
  <div class="block b">b</div>
</div>

.container {
    width: 100%;
    float: left;
    border: 1px solid red;
}

.container .block {
    /* you can style these site wide */
}

.section01 .block {
    border:1px solid black;
    padding:10px;
    margin-bottom: 1em;
}

.section01 .block:last-of-type {
    margin-bottom: 0;
}

.section01 .a {
    background-color: red;
}

.section01 .b {
    background-color: lightblue;
}