風格是奇怪的級聯

我有一個內聯樣式表很奇怪地級聯。風格是奇怪的級聯

我有一個菜單用<ul>製作，我想這樣做以便當用戶在頁面上時，<li>上當前頁面鏈接的背景顏色爲綠色。我通過創建了一個ID爲background-color: #288E3A;的ID來做到這一點，但儘管將它放在菜單的ID後面，我無法將當前的<li>變成綠色。我可以使用它的唯一方法是使用!important，但我無法讓自己使用該解決方案。 -shudder-

我有一種感覺，這可能是一個非常簡單的東西，我失蹤了。有人能解釋我出錯的地方嗎？

#menu ul { 
 
    padding: 15px; 
 
    list-style-type: none; 
 
} 
 
#menu ul li { 
 
    background-color: #363636; 
 
    margin: 0px 0px 15px; 
 
    line-height: 50px; 
 
    padding: 0px 5px 0px 5px; 
 
} 
 
#current_page ul li { 
 
    background: #288E3A /*!important*/; 
 
}

<div id="menu"> 
 
    <p>MAIN MENU</p> 
 
    <div id="button_container"> 
 
    <ul> 
 
     <li id="current_page">HOME</li> 
 
     <li>CAR LOANS</li> 
 
     <li>AUTO LOAN REFINANCING</li> 
 
     <li>AUTO CALCULATORS</li> 
 
     <li>TOOLS AND RESOURCES</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div id="content_container"> 
 
    <img src="img/cf_mobile_website-4.jpg" /> 
 
</div>

來源

2013-07-18 qaxf6auux

你的CSS是不正確的指定元素，你要的是這樣的：

#menu ul li#current_page{ 
    background:#288E3A; 
}

更重要的是，你可以使用CSS來指定的第一個孩子，所以你不會需要添加一個自定義ID：

#menu ul li:first-child{ 
    background:#288E3A; 
}

來源

2013-07-18 19:49:38

太棒了。謝謝 – qaxf6auux

這不完全是因爲CSS錯誤地指定了元素，它比前面的聲明更具體，比它重寫的更重要。 – brbcoding

實際上這是不正確的，看小提琴。當current_page id位於li時，你不能執行#current_page ul li。如果它只是#current_page，它也會起作用。 –

風格是奇怪的級聯

回答

相關問題