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

时间:2012-11-08 03:09:37

标签: css margins

我使用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切换,会出现相同的结果。

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

3 个答案:

答案 0 :(得分: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,反之亦然。

答案 1 :(得分:0)

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

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

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

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

答案 2 :(得分:0)

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

解决问题,使选择器成为

#columncenter.maximize

这将覆盖之前的规则

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