2011-10-11 111 views
0

如何覆蓋UL的默認寬度?例如:如何覆蓋CSS的寬度?

.tabPage .tabs ul { 
    margin: 0; 
    padding: 0; 
    width:149px !important; 
    margin-top: 10px; 
    list-style: none; 
} 

所以HTML應該是這樣的:

<div class="tabPage"> 
     <div class="tabs"> 
     <ul> <li> ... </li> <ul> 
     </div> 
</div> 

現在我想改變寬度大小50像素爲UL不同的網頁。

我已經試過這樣:

.TabWidthSmall { width:149px; } 

我在<ul>把這個選擇並沒有奏效。

+0

僅供參考,'!important'是邪惡的。正是這個原因,等等。 – cHao

回答

2

嘗試:

.tabPage .tabs ul.TabWidthSmall { 
    width:50px !important; /* put new width here */ 
} 
+0

那沒有用 –

+0

你把'class =「TabWidthSmall」'加到你的'ul'上,它仍然不起作用?如果你用Firebug或類似的工具檢查'ul',你會發現什麼?它應該顯示哪些樣式正在應用以及這些樣式的來源是什麼。 – Jacob

+0

這應該工作http://jsfiddle.net/CrqYc/ –

3

爲什麼你需要的!important? CSS中的規則級聯關閉,使用!important暫停此過程。如果你在父母上設置了一個寬度ul,並在後續的任何子女上設置了另一個寬度ul - 假設css選擇器是正確的 - 這會被拾取並應用到你的元素。

此外,作爲@Javad_Amiry提到你也可以使用!important上你的孩子ul覆蓋以前!important,但我會盡量避開使用這麼多!important的,因爲它是設計不良的標誌。

+0

同意。爲什麼在'.tabPage .tabs ul'中有一個!重要的,那就是你的問題。 – Jared