覆盖css规则

Question

html文件

 <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底部边框颜色

Answer 1

在任何地方使用！重要的是不好的做法。这意味着您无法控制样式表。正确的规则是：

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

Answer 2

将.selected更改为ul#navbar li.selected