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。但是，如果我只是写一个而不是“a .div”，我将无法获得其他div内所期望的行为。

我让这个工作的唯一方法是使用“重要的！” （即“border：none！important”;）但这似乎不够优雅。

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

笏。

Answer 1

您的选择器错了。

而不是

a. div {

写

div.a {

（选择任何一个类为＃34; a＆＃34;

的div

而不是

b {

（实际上会尝试设置所有 b 元素的样式）

使用

.b {

（表示选择由＆＃34; b＆＃34;类）定义的任何内容。

编辑（响应回复）

要选择＆＃34; a＆＃34;类中div内的所有div，请使用以下选择器： -

div.a div

Answer 2

.a div的特异性高于.b 如果你希望.b的css覆盖.a，那么仍然给它一个更高的特异性，例如.a div.b。

（或者您可以使用!important，是的，但不建议这样做。）

Answer 3

特异性得分由CSS编译器计算，声明中的最高得分可以修改内容。

分数通常按此顺序计算：

inline   id-element   class-element   no.-of-elements
  $          $             $                $

（$） - ＆gt;如果代码中存在相应类型的特异性，则为1 （$） - ＆gt;如果代码中不存在相应的特异性类型，则为0

所以这里为.a div得分将为0012为.b得分为0011
显然，第一个获胜，因此即使.b试图覆盖.a div，也可以修改内容的（OR）

您可以在声明中使用!important来完成该声明