活动页面无效

Question

您好，我很抱歉“轻松”＃39;问题，我只是从网站上逐字逐句地这样做，所以我必须错过一些非常明显的东西。好的，我有一个li列表，我希望第一个是黄色，其他元素是白色。我在实际项目li a { color: white中有一条规则，但我很确定这个特定类应该覆盖该规则，不是吗？任何帮助将不胜感激，谢谢。

 


.active{
	color: yellow;
}


#subnav {
	height: 10%;
	text-align: center;
}

#subnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: green;
	text-align: center;
	width: 100%;
	font-weight: bold;
	
}

#subnav li {
    display: inline-block;
}

#subnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#subnav li a:hover {
   color: yellow;
}
<div id="subnav">


<ul> 
 

    				<li> <a class="active" href="#overview">Overview </a></li>
        	



    		</ul>

  </div>

 

Answer 1

添加更具体的css选择器以覆盖来自#subnav li a的白色，如下所示：

#subnav li a.active {
  color: yellow;
}

如果您已将li类放入其中，您将获得第一个active黄色。

.active {
  color: yellow;
}
#subnav {
  height: 10%;
  text-align: center;
}
#subnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: green;
  text-align: center;
  width: 100%;
  font-weight: bold;
}
#subnav li {
  display: inline-block;
}
#subnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#subnav li a.active {
  color: yellow;
}
#subnav li a:hover {
  color: yellow;
}

<div id="subnav">

  <ul>
    <li> <a class="active" href="#overview">Overview </a>
    </li>
    <li> <a href="#test">Test </a>
    </li>
  </ul>

</div>

Answer 2

试试这个，它应该有效。感谢

#subnav li a:hover,
#subnav li a.active {
   color: yellow;
}