我有一个非常奇怪的级联样式表。
我有一个用 <ul>
制作的菜单我想做到这一点,以便当用户在页面上时,当前页面链接的背景颜色在 <li>
上是绿色的。我通过使用 background-color: #288E3A;
创建一个 ID 来做到这一点, 但尽管将它放在菜单的 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>
最佳答案
你的 css 没有正确指定元素,你想要的是:
#menu ul li#current_page{
background:#288E3A;
}
更好的是,您可以使用 css 指定第一个 child ,这样您就不需要添加自定义 ID:
#menu ul li:first-child{
background:#288E3A;
}
关于css - 风格层叠怪异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17732577/