jquery添加类但chrome不呈现

Question

css代码

#id .class1 .class2 .a{max-height:20px}
.b{max-height:100px}

我使用jquery将类'b'添加到具有类'a'的元素中，但chrome不会渲染它。 但如果我写

#id .class1 .class2 .b{max-height:100px}

chrome会渲染它......

我只想知道为什么

Answer 1

这是因为css rule priority

例如：

<div id="id">
    <div class="class1">
        <div class="class2">
            <div class="a">
            </div>
        </div>
    </div>
</div>

在上述情况下，如果将b添加到div.a，则规则#id .class1 .class2 .a将覆盖规则.b，因为它更具体

级联的工作原理如下：

1. 更重要的规则适用。
2. 如果同样重要，则适用更具体的规则。
3. 如果同样具体，后一条规则适用。

Answer 2

试试这个 -

.b{max-height:100px !important;}

Answer 3

我相信你的CSS选择器具有更高的特异性，这意味着它将优先于具有单个类的jQuery选择器。使用jQuery选择元素时，请尝试使用CSS中的完整路径。

$('#id .class1 .class2 .a').addClass...