jQuery addClass 高度问题

Question

我正在尝试展开一个 div。但是，一切正常都接受“高度”属性。我使用 jQuery 的 addClass 函数来添加这个类；

.expandHighlight
{
   height:300px;
   border-color:rgba(48,110,158,.75)!important;
   box-shadow:0 0 5px 2px rgba(48,110,158,.5);
}

使用 jQuery 函数；

$('#expand').click(function()
   {
    $('#buttonField').css('visibility','hidden');
    $('#expand').addClass("expandHighlight");
   });

我试图扩展的 div 有 css；

#expand
{
   background-color:#F9F9F9;border-radius:3px;
   border:1px solid #C0C0C0;
   width:500px;
   height:66px;
   border-radius:2px;
}

Answer 1

添加类后，您将拥有两个 CSS 规则，它们属于同一对象的高度。这意味着 CSS 特异性规则将决定应用哪个 CSS 规则。

在这种情况下，#expand 规则比 .expandHighlight 规则更具体，因此它获胜。

您可以通过像这样向 .expandHighlight 规则添加更多特异性来解决此问题:

#expand.expandHighlight {
   height:300px;
   border-color:rgba(48,110,158,.75)!important;
   box-shadow:0 0 5px 2px rgba(48,110,158,.5);
}

并且，那么它就会有更多的特异性，并且会在分配expandHighlight类时获胜。

您可以阅读有关 CSS 特异性及其工作原理的更多信息 here .

---

您还可以通过将这两个规则都设为一个类并将 expandHighlight 规则放在常规高度规则之后来修复它，如下所示:

<div id="expand" class="expandNormal"></div>

.expandNormal {
    height: 500px;
    border:1px solid #C0C0C0;
    width:500px;
}

.expandHighlight {
   height:300px;
   border-color:rgba(48,110,158,.75)!important;
   box-shadow:0 0 5px 2px rgba(48,110,158,.5);
}

你当然会添加 class="expandNormal" 到 #expand 对象，这样它就会得到默认规则，然后被 expandHighlight 覆盖 仅当该类也存在时才规则。