blocks|key|2678840|text|因为id%2Bselector+(#iddiv+span)比类更具体。任一|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2678841|#iddiv+span.myclass|code-block|syntax|javascript|2678842|或|2678843|#iddiv+.myclass|2678844|对这个案子应该是有效的。|2678845|了解更多关于CSS+specificity+here的信息，或者通过谷歌了解更多。|offset|length|2678846|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/cascade.html#specificity^0|0|0|0|0|0|M|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Because id+selector (#iddiv span) is more specific than a class. Either

<pre><code>#iddiv span.myclass
</code></pre>

or 

<pre><code>#iddiv .myclass
</code></pre>

should work for this case.

Learn more about CSS specificity <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">here</a> or by Googling it.

blocks|key|2678925|text|您可以始终使用!important标志来覆盖：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2678926|.myclass+{
++++width:+10px+!important;
}|code-block|syntax|javascript|2678927|entityMap^0|7|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You could always use the <code>!important</code> flag to override:

<pre><code>.myclass {
 width: 10px !important;
}
</code></pre>

blocks|key|1062869|text|CSS根据选择器的具体情况应用样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062870|#iddiv+span比myclass更具体。将其更改为#iddiv+.myclass应该会为您解决此问题。|offset|length|style|CODE|1062871|这里有一篇文章对此进行了更深入的探讨：http://htmldog.com/guides/cssadvanced/specificity/|1062872|entityMap|0|LINK|mutability|MUTABLE|url|http://htmldog.com/guides/cssadvanced/specificity/^0|0|0|B|C|7|S|F|0|J|1E|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

CSS applies styles according to the specificity of the selectors 

<code>#iddiv span</code> is more specific than <code>myclass</code>. Changing it to <code>#iddiv .myclass</code> should fix the issue for you.

Here's an article that goes more in depth about this : <a href="http://htmldog.com/guides/cssadvanced/specificity/" rel="noreferrer">http://htmldog.com/guides/cssadvanced/specificity/</a>

blocks|key|2964679|text|请记住使用关键字!important，该关键字用于覆盖父规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2964680|你也可以用下面的方式定义你的"myclass“：|2964681|#iddiv+span.myclass+{
++++width:10px;
}|code-block|syntax|javascript|2964682|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Remember to use the keyword, !important, which functions to overwrite parent rules. 

Also you can define your "myclass" in the following way:

<pre><code>#iddiv span.myclass {
 width:10px;
}
</code></pre>

blocks|key|4752198|text|它不起作用，因为第一种风格更具体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4752199|要修复它，请确保更直接地针对第二个span，如下所示|offset|length|style|CODE|4752200|#iddiv+span.myclass|4752201|http://jsfiddle.net/jasongennaro/5fe9A/|4752202|entityMap|0|LINK|mutability|MUTABLE|url^0|0|H|4|0|0|J|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|L|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|K]]]]

It's not working because the first style is more specific.

To fix it, make sure you target the second <code>span</code> more directly, like this

<code>#iddiv span.myclass</code>

<a href="http://jsfiddle.net/jasongennaro/5fe9A/" rel="nofollow">http://jsfiddle.net/jasongennaro/5fe9A/</a>

blocks|key|2964641|text|首先，我建议你像其他人建议的那样，适当地瞄准你的选择器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2964642|但是，当所有其他方法都失败时，您可以使用!important。|offset|length|2964643|entityMap|0|LINK|mutability|MUTABLE|url|http://webdesign.about.com/od/css/f/blcssfaqimportn.htm^0|0|K|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

First of all, I'd suggest you properly target your selectors, as others are suggesting. 

But when all else fails, you can use <a href="http://webdesign.about.com/od/css/f/blcssfaqimportn.htm" rel="nofollow">!important</a>.

<pre><code>#iddiv span {
 display: inline-block;
 width: 190px;
}
.myclass {
 width:10px;
}
</code></pre>

Then I have 

<pre><code>&lt;div id="iddiv"&gt;
 &lt;span&gt;hello:&lt;/span&gt; 
 &lt;span class="myclass"&gt;yeah&lt;/span&gt; &lt;br/&gt;
&lt;/div&gt;
</code></pre>

I would like the first <code>span</code>'s <code>width</code> to be 190px, and second's to be 10px. But both are 190px: why it's not overriding the <code>width</code> propoerty?

EDIT: Thanks for your responses. What about unsetting width? I don't want 10px width, just default width as if it was undefined

Overriding properties in CSS

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

#iddiv span { display: inline-block; width: 190px;}.myclass { width:10px;}然后我有<div id="iddiv"> hello: yeah </div>我希望第一个span的width是190px，第

问覆盖CSS中的属性
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖CSS中的属性EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖CSS中的属性
EN