如何将指定CSS样式应用到特定li/span类实现默认激活悬停效果

核心问题是CSS选择器和实际HTML的类名、结构不匹配：

• 你的CSS规则匹配的是带is-active类的<a>标签，但当前HTML里激活态的<a>用的类名是selected1，选择器根本匹配不到目标元素
• 你的CSS选择器最外层依赖.nav--icons的父容器，如果导航最外层没有加这个类，整条规则都会失效
• 你只写了悬停/激活时span的样式，没写span默认状态的初始属性，就算匹配到元素也不会有平滑显示的效果

调整后的HTML结构 #

统一用is-active作为激活态的状态类名，补全外层必要的结构类名：

<nav class="nav--icons">
  <ul>
    <li>
      <a class="is-active" href="#home">
        <svg class="icon icon-home" viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor" d="M21.6 8.2l-9-7c-0.4-0.3-0.9-0.3-1.2 0l-9 7c-0.3 0.2-0.4 0.5-0.4 0.8v11c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.6-0.4-0.8zM14 21h-4v-8h4v8zM20 20c0 0.6-0.4 1-1 1h-3v-9c0-0.6-0.4-1-1-1h-6c-0.6 0-1 0.4-1 1v9h-3c-0.6 0-1-0.4-1-1v-10.5l8-6.2 8 6.2v10.5z"></path>
        </svg>
        <span>Home</span>
      </a>
    </li>
    <!-- 其余导航项按相同结构书写即可 -->
  </ul>
</nav>

完整可运行CSS #

补全span默认状态样式、过渡属性，修正选择器匹配规则：

/* 清除默认列表样式 */
.nav--icons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 导航项基础样式 */
.nav--icons ul li a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}
/* 激活态a标签样式 */
.nav--icons ul li a.is-active {
  color: #fff;
  background-color: #000;
}
/* span默认隐藏状态 */
.nav--icons ul li a span {
  opacity: 0;
  max-width: 0;
  transform: translate3d(-6px, 0, 0);
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}
/* 悬停/激活时span展开显示 */
.nav--icons ul li a:hover span,
.nav--icons ul li a.is-active span {
  opacity: 1;
  max-width: 40px;
  transform: translate3d(0, 0, 0);
  margin-left: 6px;
}

• 带is-active类的默认激活项，加载完成就直接呈现黑底白字效果，旁边的文字标签默认展开
• 鼠标悬停在其他导航项上时，对应文字标签会平滑展开，移开后自动收起
• 所有状态切换带0.3s的平滑过渡，没有生硬的跳变

内容的提问来源于stack exchange，提问作者Heçkır 001