覆蓋CSS規則

HTML文件覆蓋CSS規則

<ul id="navbar"> 
      <li class="selected"> 
       <a href="#"> HOME</a> 
      </li> 
      <li> 
       <a href="#"> ABOUT US</a> 
      </li> 
    </ul>

css文件

ul#navbar li { 
    font-size: 13px; 
    padding: 10px; 
    display: inline; 
    text-decoration: none; 
    border: 1px solid #aaaaaa; 
    }

，現在我想下邊框只在活動列表項添加到綠色。

.selected { 
border-bottom: 5px solid #37F053; 
}

但是這不起作用。它仍然有#aaa底部邊框顏色

來源

2015-04-01 user3299707

您可以將'！imporant'添加到任何規則以覆蓋已設置的其他規則。 http://jsfiddle.net/60k6mtve/ ...或者你可以改變你的CSS特異性水平。 – mituw16 2015-04-01 18:20:09

根據[特異性]（http://www.w3.org/TR/CSS2/cascade.html#specificity），'ul＃navbar li'具有比'.selected'類選擇器更高的值。相反，使用：'ul＃navbar li.selected' – 2015-04-01 18:21:06

謝謝，現在就開始@HashemQolami – user3299707 2015-04-01 18:22:06

變化.selected到ul#navbar li.selected

來源

2015-04-01 18:22:02 9Deuce

使用！重要的是隨處可見的做法不好。這意味着你無法控制你的樣式表。正確的規則將是：

ul#navbar li.selected { 
    border-bottom: 5px solid #37F053; 
}

來源

2015-04-01 18:37:51 Samir

回答

相關問題