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 - 特定於單個元素的樣式

回答

相關問題