jquery - jquery添加类但chrome不呈现

Question

CSS代码

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

我使用 jquery 向具有类 'a' 的元素添加一个类 'b'，但 chrome 不会呈现它。但如果我写

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

chrome会渲染它...

我只想知道为什么

Answer 1

这是因为css 规则优先级

前任：

<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...