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

我正在使用jQuery向一些元素添加一个类。CSS - 特定于单个元素的样式

我不是新来添加类，也不删除它们。但我仍然有些中间风格和任何灵活性风格可以执行单个元素。

这里是发生了什么事情：

我有2周的div是我与jQuery的影响：

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

我基本上切换这些2周的div与下面的jQuery的例子：

到目前为止，我已经得到了这2种独立的情况下工作：

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

然后........

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

虽然这个工程，我不是很满意。
我宁愿创建一个或两个我可以用来切换隐藏columnleft的类，同时还要同时更改margin-left。

对于上面的例子，当我只使用jQuery时，这一切都很好。但有时会加载一个页面，并且columnleft意味着隐藏，并且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，也会发生相同的结果。

列中心恨我！有没有人看到我失踪的痕迹？

来源

2012-11-08 coffeemonitor

查看的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; 
}

您可以更新哟你只需要在父容器上切换.hide-left或.show-left类。

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

来源

2012-11-08 03:22:59 Tuanderful

有趣的是，您提到了额外的div。我确实有过，但没有想到提及它。你提出了一个很好的观点。我需要看你的例子给我一个体面的看法，如何CSS只影响这2个div。谢谢！ – coffeemonitor

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

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

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

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

来源

2012-11-08 03:16:50 Aust

每种类型的CSS选择器的加权不同ID比阶级和阶级比对象

更高

解决您的问题更高做出选择这样

#columncenter.maximize

这将覆盖该规则之前它

不使用!important虽然它现在可能工作，但它可能很难找出为什么稍后将被覆盖的东西

来源

2012-11-08 03:22:37 Gilsham

不会'＃columncenter.maximize'难以理解为什么你的样式被覆盖？特别是如果在数百行样式中使用这种方法？而如果您使用'！important'，则可以查找'！important'关键字并快速知道问题所在...... – Aust

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

回答

相关问题