0

本当に奇妙にカスケードしているインライン スタイルシートがあります。

で作成したメニューがあり<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

あなたのCSSは要素を正しく指定していません。あなたが望むのはこれです:

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

さらに良いことに、css を使用して最初の子を指定できるので、カスタム ID を追加する必要はありません。

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