CSS不会覆盖继承的值

Question

我有一个Html,其中包含:( div A中的多个div).

<div class="a">
    <div class="b"></div>
</div>

我的CSS看起来像那样:

.a div {
    border: solid;
    border-width: thin;
}

.b {
    border: none;
    border-width: 0px;
    border-collapse: collapse;
}

由于某种原因,b的值不会覆盖a.但是,如果我只是写一个而不是".div",我将无法获得其他div内部的行为.

我让这个工作的唯一方法是使用"重要!" (即"border:none!important";)但这似乎不够优雅.

我会喜欢任何关于那里发生的事情的想法.

埃胡德.

Answer 1

.a div具有比 更高的特异性.b。
如果您希望 .b 的 css 覆盖 .a 的 css，请为其指定更高的特异性，例如.a div.b。

（或者你可以使用!important，是的，但这里不推荐这样做。）