blocks|key|336158|text|只需通过添加标记名称使您的选择器更加具体：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|336159|div.mark+{
++++margin:30px;
}|code-block|syntax|javascript|336160|演示：+|offset|length|style|BOLD|336161|如果不想使用标记名，也可以使用.cont+.mark。|CODE|336162|entityMap^0|0|0|0|3|0|F|B|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@$I|U|J|V|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|W|8|@$I|X|J|Y|K|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

Just make your selector more specific by adding the tag name:

<pre><code>div.mark {
 margin:30px;
}
</code></pre>

Demo: <a href="http://jsfiddle.net/xNVRm/1/" rel="nofollow">http://jsfiddle.net/xNVRm/1/</a>

You could also use <code>.cont .mark</code> if you want to avoid using the tag name.

blocks|key|4495826|text|为了避免使用important，你需要使你的css选择器更具体。您可以使用.cont+div.mark。它比div.mark更具体。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4495827|entityMap^0|6|9|11|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

In order to avoid to use the <code>important</code> you need to make your css selector more specific. You can use <code>.cont div.mark</code>. It is more specific than div.mark.

blocks|key|4495871|text|特异性是CSS规则排序方式的关键。试着看看这篇来自HTML+Dog的文章：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4495872|http://www.htmldog.com/guides/cssadvanced/specificity/|offset|length|4495873|您可以改用div.mark，这意味着任何具有mark类的div都可以这样做。|style|CODE|4495874|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1I|0|0|5|8|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@$D|W|E|X|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

Specificity is key to how CSS rules are given a pecking order. Try looking at this article from HTML Dog:

<a href="http://www.htmldog.com/guides/cssadvanced/specificity/" rel="nofollow">http://www.htmldog.com/guides/cssadvanced/specificity/</a>

You could use <code>div.mark</code> instead, which means any div that has the class of mark, do this.

blocks|key|4495916|text|".cont+div“声明覆盖了".mark”声明，因为它实际上更具体。CSS使用一种积分系统来确定哪些规则适用。在本例中，".cont+div“指定一个类和其中的一个元素，而".mark”只指定一个类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4495917|有关所有符合要求的浏览器应该使用的确切规则，请参阅此链接：http://www.w3.org/TR/CSS21/cascade.html#specificity|offset|length|4495918|在您的示例中，您可以通过在第二个声明中使用".cont+.mark“来修复此问题。|4495919|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/cascade.html#specificity^0|0|T|1F|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

The ".cont div" declaration overrides the ".mark" declaration because it's actually more specific. CSS uses a kind of point system to figure out which rules apply. In your case, ".cont div" specifies both a class and an element inside it, whereas ".mark" only specifies a class.

For the exact rules that should be used by all conforming browsers, see this link: <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity" rel="nofollow">http://www.w3.org/TR/CSS21/cascade.html#specificity</a>

In your case you could fix this by using ".cont .mark" in the second declaration.

blocks|key|4978513|text|再看一遍，我发现我没有理解你想要做什么。我想我现在明白了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4978514|你的意思是-任何包含.cont类的div都会有10px的边距。它比.mark更具体。.mark是30px+--但它是.cont内部的一个div+--所以它是10px。它从右到左阅读--这是一个思考它和检查特异性的好方法。|4978515|我开始用一种更面向对象的方法来思考问题。你对这种方法有什么看法？|4978516|HTML|4978517|<div+class="container+section01">
++<div+class="block+a">a</div>
++<div+class="block+b">b</div>
</div>|code-block|syntax|javascript|4978518|CSS|4978519|.container+{
++++width:+100%25;
++++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;
}|4978520|SASS会让这一切变得容易得多。|4978521|本例的jsFiddle|offset|length|4978522|更大规模的CODEPEN|4978523|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sheriffderek/FwQHm/|1|http://codepen.io/sheriffderek/pen/JwxAs^0|0|0|0|0|0|0|0|0|3|8|0|0|5|7|1|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1G|8|@]|9|@$U|1H|V|1I|1|1J]]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$U|1L|V|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

Looking over this again, I see I wasn't understanding what you were trying to do. I think I see now.

You are is saying - ANY div inside of anything with class .cont will have 10px margin. It's more specific then .mark. .mark is 30px - BUT it's a div that is inside of .cont - so it's 10px. It reads right to left - that is a good way to think about it and check specificity.

I have come to think of things with a more object oriented approach. What do you think about this approach?

 

HTML

<pre><code>&lt;div class="container section01"&gt;
 &lt;div class="block a"&gt;a&lt;/div&gt;
 &lt;div class="block b"&gt;b&lt;/div&gt;
&lt;/div&gt;
</code></pre>

 

CSS

<pre><code>.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;
}
</code></pre>

SASS would make this much easier.

a <a href="http://jsfiddle.net/sheriffderek/FwQHm/" rel="nofollow">jsFiddle</a> of this example

a <a href="http://codepen.io/sheriffderek/pen/JwxAs" rel="nofollow">CODEPEN</a> of this on a larger scale

I have this simple CSS:

<pre><code>.cont div {

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

.mark { /* This get ignored? */

 margin:30px;
}
</code></pre>

With this markup:

<pre><code>&lt;div class="cont"&gt;
 &lt;div&gt;a&lt;/div&gt;
 &lt;div class="mark"&gt;b&lt;/div&gt;
&lt;/div&gt;
</code></pre>

I except the div.mark having <code>margin:30px;</code> but at least in Chrome this isn't true because the generic rule <code>.cont div</code> seems to have a higher priority.

Consider I don't want to use <code>!important</code> are there any other way to solve this?

<a href="http://jsfiddle.net/xNVRm/" rel="nofollow">http://jsfiddle.net/xNVRm/</a>

CSS rules priority

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个简单的CSS：.cont div { margin:10px; border:1px solid;}.mark { /* This get ignored? */ margin:30px;}使用此标记：<div class="cont"> <div>a</div> <div class="mark"...

问CSS规则优先级
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS规则优先级EN