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。

Answer 2

为了避免使用important，您需要使css选择器更具体。您可以使用.cont div.mark。它比div.mark更具体。

Answer 3

“。cont div”声明会覆盖“.mark”声明，因为它实际上更具体。 CSS使用一种点系统来确定适用的规则。在您的情况下，“。enct div”指定其中的类和元素，而“。mark”仅指定类。

有关所有符合标准的浏览器应使用的确切规则，请参阅以下链接：http://www.w3.org/TR/CSS21/cascade.html#specificity

在你的情况下，你可以通过在第二个声明中使用“.cont .mark”来解决这个问题。

Answer 4

特异性是CSS规则如何获得啄食顺序的关键。试着看看HTML Dog的这篇文章：

http://www.htmldog.com/guides/cssadvanced/specificity/

您可以使用div.mark代替，这意味着任何具有标记类的div都会执行此操作。

Answer 5

再看一遍，我看到我不明白你想要做什么。我想我现在看到了。

你在说 - 任何有类.cont的内部任何div都有10px的余量。它比.mark更具体。 .mark是30px - 但它是一个在.cont里面的div - 所以它是10px。它从右到左阅读 - 这是一种思考它并检查特异性的好方法。

我开始用更面向对象的方法来思考问题。您如何看待这种方法？

HTML

<div class="container section01">
  <div class="block a">a</div>
  <div class="block b">b</div>
</div>

CSS

.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;
}

SASS会让这更容易。

此示例的jsFiddle

更大规模的CODEPEN

CSS规则优先

5 个答案: