Question

我正在尝试扩展div。但是一切都可以接受'height'属性。我使用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规则覆盖。< / p>

Answer 2

#id选择器的specificity比.class选择器多{{3}}。

您可以更改.class选择器具有更多特异性。

Answer 3

问题在于div内的内容是否小于高度本身。您必须使用最小高度而不是正常高度，因此类将如下所示：

.expandHighlight {
    min-height:300px;
    ....
}

以下是工作代码演示：http://jsfiddle.net/Ajjd4/

jQuery addClass高度问题

3 个答案: