覆盖CSS中的属性

Question

#iddiv span {
    display: inline-block;
    width: 190px;
}
.myclass {
    width:10px;
}

然后我

<div id="iddiv">
    <span>hello:</span> 
    <span class="myclass">yeah</span> <br/>
</div>

我希望第一个span的{​​{1}}为190px，第二个为10px。但两者都是190px：为什么它不会超越width propoerty？

编辑：感谢您的回复。取消宽度怎么样？我不希望10px宽度，只是默认宽度，就好像它是未定义的

Answer 1

您始终可以使用!important标记来覆盖：

.myclass {
    width: 10px !important;
}

Answer 2

因为id + selector（#iddiv span）比类更具体。任

#iddiv span.myclass

或

#iddiv .myclass

适用于此案例。

详细了解CSS特异性here或谷歌搜索。

Answer 3

CSS根据选择器的特异性来应用样式

#iddiv span比myclass更具体。将其更改为#iddiv .myclass应该可以解决问题。

以下是一篇更深入的文章：http://htmldog.com/guides/cssadvanced/specificity/

Answer 4

它不起作用，因为第一种风格更具体。

要解决此问题，请确保直接定位第二个span，例如

#iddiv span.myclass

http://jsfiddle.net/jasongennaro/5fe9A/

Answer 5

首先，我建议您正确定位您的选择器，正如其他人所建议的那样。

但是当其他所有方法都失败时，您可以使用!important。

Answer 6

请记住使用关键字！important，其功能可覆盖父规则。

您还可以通过以下方式定义“myclass”：

#iddiv span.myclass {
    width:10px;
}