Question

我使用jQuery将一个Class添加到几个元素中。

我不是新添加类，也不是删除它们。但我对样式仍然有点中间，任何灵活性样式都可以对单个元素执行。

这是＆＃39>正在进行的事情：

我有2个我用jQuery影响的Div：

<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>

简而言之，左列大约是155px宽，而columncenter相对于columnleft定位，左边距为162px

这是我的风格：

<style>
#columnleft {
  float:left; 
  position:relative;
  text-align:left;
  width:155px; 
}

#columncenter {  
  position:relative; 
  padding-bottom:50px
  margin:0; 
  margin-left:162px; 
}
</style>

我基本上用下面的jQuery示例切换这两个div：

到目前为止，我已经让这两个独立的实例工作了：

$("#columnleft").hide();
$("#columncenter").css("margin","0px");

然后........

$("#columnleft").show();
$("#columncenter").css("margin-left","162px");

虽然这有效，但我并不十分满意我更喜欢创建一个或两个类，我可以使用它来切换列左侧的隐藏，同时还可以同时更改margin-left。

上面的例子，当我只使用jQuery时，一切都很好。但是有时会加载页面，并且列左侧是隐藏的，并且columncenter意味着从头开始扩展。很高兴在那些时刻不需要jQuery进入场景。

我能想出的就是：

<style>
.disappear { display:none; }
.maximize { margin:0px;  margin-left:0px; }
</style>

页面加载时：

<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>

似乎忽略了columncenter。（columnleft确实消失了）此外，使用jquery切换，会出现相同的结果。

列中心讨厌我！有没有人知道我在哪里错过了这个标记？

Answer 1

查看JSFiddle： http://jsfiddle.net/tuanderful/bTZq8/

如果您有另一个div同时包含#columnleft和#columncenter，并且类别为.hide-left或.show-left，该怎么办？

<div class="hide-left">
    <div id="columnleft">stuff in here</div>
    <div id="columncenter">bigger stuff in here</div>
</div>

然后添加以下CSS：

.show-left #columnleft {
    display: block;
}
.show-left #columncenter {
    margin-left: 162px; 
}

.hide-left #columnleft {
    display: none;
}
.hide-left #columncenter {
    margin-left: 0; 
}

您可以更新您的jQuery，只需在父容器上切换.hide-left或.show-left类。

我在这里做的与添加.disappear和.maximize样式类似，但我在两列中添加了一些上下文。巧妙的是，所有的样式都是纯粹由CSS处理的 - 当你想显示或隐藏侧边栏时，你只需要JavaScript来更新容器的状态;也就是说，将容器中的类从hide更改为show，反之亦然。

Answer 2

您需要将!important放在css样式上。

.maximize {
  margin-left: 0px !important;
}

这使得它覆盖了同类的任何其他样式。 Check it out here.

CSS中有一个重要的顺序。 ID #被认为比类.更重要（毕竟只能有一个id和多个类）。因此，如果您尝试使用类覆盖id，则需要使用!important。

Answer 3

css中的每种类型的选择器加权不同id高于类和高于对象的类

解决问题，使选择器成为

#columncenter.maximize

这将覆盖之前的规则

不要使用!important，虽然现在可能有用但很难找到为什么以后会覆盖某些内容

CSS - 特定于单个元素的样式

3 个答案: