logo标签列表

CSS规则优先级

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

5个回答
3
只需通过添加标签名称使选择器更具体化：
div.mark {
    margin:30px;
}

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

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

3
为了避免使用important，您需要使CSS选择器更加具体。 您可以使用.cont div.mark。 它比
更为具体。
2
".cont div"声明覆盖了".mark"声明，因为它更具体。CSS使用一种点系统来确定哪些规则适用。在您的情况下，".cont div"指定了一个类和其中的元素，而".mark"只指定了一个类。
有关所有符合规范的浏览器应使用的确切规则，请参见此链接：http://www.w3.org/TR/CSS21/cascade.html#specificity 在您的情况下，您可以通过在第二个声明中使用".cont .mark"来解决这个问题。
1

再次查看，我发现我没有理解你想做什么。我现在明白了。

你的意思是 - 任何一个带有类名.cont的元素内部的div都会有10像素的边距。这比.mark更具体。.mark是30像素 - 但它是在.cont内部的div - 所以是10像素。从右到左阅读 - 这是一种很好的思考方式和检查特异性的方法。

我开始更多地采用面向对象的方法来思考问题。你觉得这种方法怎么样？


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中省略div。 - sheriffderek
问题标记是一个例子。当然，我有超过2个div在.cont内，除了.mark之外，所有在.cont内的div都需要具有该边距。 - dynamic
是的。很难猜测您的用例。但是什么divs？.cont是一个容器，我猜想：所以我不会在那些上面放margin...我会有//.repeated-divs-inside、.cont p、.cont .thing { margin:10px }并保持容器的样式分开等。 - sheriffderek
div.mark {}回答了这个问题，但我认为它会在长期内给你带来更多的工作。 - sheriffderek
.cont div {} 已经是一个 div。我很想知道在什么情况下放置 div 是有用的。 - sheriffderek
你不理解 .cont div {} 的含义。它的意思是 .cont 内所有的 div 都需要有 margin:10px。当然，.cont 内有很多个 div。 - dynamic
1
这是正确的 - 但我认为没有必要那么具体。Mark已经非常完美了。.cont div是问题所在。 - sheriffderek
或者，他可以只使用类而不是div声明来使用.cont类。导致混乱的特异性在父级别（.cont div）处。 - tahdhaze09
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接