將css應用於特定的li類

我想爲每個li元素指定某些顏色，但似乎無法做到這一點。它繼續爲所有人做。

這裏是我的CSS：

#sub-nav-container ul 
{ 
    position: absolute; 
    top: 96px; 
    left: 594px; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#sub-nav-container li 
{ 
    margin: 0; 
} 

#sub-nav-container a 
{ 
    display: block; 
    text-decoration: none; 
    border-bottom: none; 
    color: #C1C1C1; 
    display: inline;   
} 

li.sub-navigation-home-news 
{ 
    color: #C1C1C1; 
    font-family: Arial; 
    font-size: 13.5px; 
    text-align: center; 
    text-transform: uppercase; 
    padding: 0px 90px 0px 0px; 
}

這裏的HTML

<div id="sub-nav-container"> 
    <ul id="sub-navigation-home"> 
     <li class="sub-navigation-home-news"><a href="#">News</a></li> 
     <li class="sub-navigation-home-careers"><a href="#">Careers</a></li> 
     <li class="sub-navigation-home-client"><a href="#">Client Login</a></li> 
     <li class="sub-navigation-home-canada"><a href="#">CANADA</a></li> 
     <li class="sub-navigation-home-usa"><a href="#">USA</a></li> 
    </ul> 
</div>

來源

2011-06-16 Rizwan

定義他們更多的在你的CSS文件。取而代之的

li.sub-navigation-home-news

嘗試

#sub-navigation-home li.sub-navigation-home-news

檢查此瞭解更多詳情： http://www.w3.org/TR/CSS2/cascade.html#cascade

來源

2011-06-16 17:55:59

-2

我相信這是因爲計算元素的最終樣式時#ID樣式王牌的.class風格。嘗試從class改變你li到id，或者你可以 ~~嘗試添加到您的類重要的，就像這樣：！~~

~~li.sub-navigation-home-news { color: #C1C1C1; !important~~

來源

2011-06-16 17:56:24 hughes

重要的是邪惡的，儘量避免它，它會導致你最終維護你的CSS的麻煩，結束在災難！ – fijter 2011-06-16 17:58:17

嗯，看起來你是對的。我沒有意識到這一點。我可能需要做一些工作來完成我的樣式表... – hughes 2011-06-16 18:03:31

我只看到被指定一種顏色（雖然你兩個指定它不同的地方。）要麼你省略了一些你的樣式規則，要麼你只是沒有指定另一種顏色。

來源

2011-06-16 17:56:39 kinakuta

您使用的CSS顏色＃c1c1c1應用於所有<a>元素。

而且它還將顏色＃c1c1c1應用於第一個<li>元素。

也許你發佈的代碼缺少一些東西，因爲我沒有看到任何其他顏色被定義。

來源

2011-06-16 17:57:04 Sparky

這是因爲<a>在那裏，而不是使用id至極您做進一步的使用有點它的頂部

更改爲：

#sub-navigation-home li.sub-navigation-home-news a 
{ 
color: #C1C1C1; 
font-family: arial; 
font-size: 13.5px; 
text-align: center; 
text-transform:uppercase; 
padding: 0px 90px 0px 0px; 
}

，它會propably工作

來源

2011-06-16 17:57:15 fijter

嘿謝謝，這個工作很棒。 – Rizwan 2011-06-16 18:04:57

@Rizwan：如果這個工作，你應該標記asnwer被接受。 – Jawad 2011-06-16 18:09:19

您正在使用#sub-nav-container a爲所有a元素定義color: #C1C1C1;。

在li.sub-navigation-home-news中再次執行此操作將不會執行任何操作，因爲它是a元素的父級。

來源

2011-06-16 17:57:17 Niklas

您已爲li元素指定了不同的顏色，但它正在被li中的a中的指定顏色覆蓋。去除顏色：＃C1C1C1;從一個元素的風格，它應該工作。

來源

2011-06-16 17:57:41 Dipil

將css應用於特定的li類

回答

相關問題