如何使用HTML、CSS、PHP设置侧边栏选中项的激活状态

问题原因 #

1. 类名匹配错误：你在HTML中是给<li>标签加的active类，但原有CSS选择器.sidebar li a.active是用来匹配<a>标签上的active类，二者完全不匹配，所以激活样式不会生效。
2. 样式优先级问题：你直接给li加背景样式时，<a>标签本身设置的background: #76b852优先级更高，会覆盖父元素li的背景，所以显示异常。
3. 颜色设置错误：原有激活样式里color: white是白色，白色背景配白色文字/图标完全看不见，不符合你要的图标文字变黑的需求。

修复方案 #

你不需要修改现有HTML代码，只需要替换CSS代码即可：

.sidebar li a {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #76b852;
  /* 增加默认文字/图标颜色，和激活状态区分 */
  color: #fff;
}
.sidebar li a:hover{
  background: #FFF;
  /* 悬浮时也改成黑色，避免看不见文字 */
  color: #000;
}

/* 修改选择器，匹配带active类的li下的a标签 */
.sidebar li.active a{
  background-color: #FFF;
  color: #000;
}
/* 单独给图标设置颜色，避免不继承父元素文字颜色 */
.sidebar li.active a .material-icons {
  color: #000;
}

修改后即可实现选中项背景变白、图标和文字变为黑色的激活效果。

内容的提问来源于stack exchange，提问作者Abdlhay