0

我有一个非常奇怪的级联的内联样式表。

我有一个用 a 制作的菜单<ul>，我想制作它，以便当用户在页面上时，当前页面链接的背景颜色<li>为绿色。我通过创建一个 ID 来做到这一点background-color: #288E3A;，但是尽管将它放在菜单的 ID 之后，我无法使当前<li>变为绿色。我可以让它工作的唯一方法是使用!important，但我不能让自己使用那个解决方案。-不寒而栗-

我有一种感觉，这可能是我想念的非常简单的事情。有人可以解释我哪里出错了吗？

#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>

4

1 回答 1

1

your css is incorrectly specifying the element, what you want is this : 

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

Better yet you could use css to specify the first child so you wont need to add a custom id:

#menu ul li:first-child{
    background:#288E3A;
}
于 2013-07-18T19:49:38.647 回答