精确选择器：针对

要精确地控制特定

1. 直接选择

li svg, li span {
    color: #fff;
    background-color: #000;
}

这个规则会选择所有

2. 使用类名进行更精细的控制：

如果需要更精细的控制，建议为

HTML:

<li class="n*-item">
  <a class="selected1" 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 class="selected2">Home</span>
  </a>
</li>

CSS:

一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。

.n*-item svg {
  color: #fff;
  background-color: #000;
}

.n*-item .selected2 {
  opacity: 1;
  max-width: 40px;
  transform: translate3d(0, 0, 0);
}

在这个例子中，.n*-item svg 选择器只会影响带有 n*-item 类名的

3. 模拟 :hover 效果：

如果需要模拟 :hover 效果，可以使用 J*aScript 添加或移除类名。例如，当页面加载时，为特定的

HTML:

<li class="n*-item active">
  <a class="selected1" 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 class="selected2">Home</span>
  </a>
</li>

CSS:

.n*--icons ul li a.is-active {
  color: #fff;
  background-color: #000;
}
.n*--icons ul li a.is-active span {
  opacity: 1;
  max-width: 40px;
  transform: translate3d(0, 0, 0);
}

.n*-item.active svg {
  color: #fff;
  background-color: #000;
}

.n*-item.active .selected2 {
  opacity: 1;
  max-width: 40px;
  transform: translate3d(0, 0, 0);
}

或者使用 J*aScript：

// 获取需要默认激活的li元素
const homeLi = document.querySelector('.n*-item');

// 添加 'active' 类
homeLi.classList.add('active');

这样，

注意事项

• CSS 优先级： 确保你的 CSS 规则具有足够的优先级，以便覆盖其他可能应用的样式。可以使用更具体的选择器或 !important 声明（谨慎使用）。
• 代码可维护性： 使用有意义的类名，并避免过度使用内联样式。将样式定义放在 CSS 文件中，以便更好地组织和维护代码。
• 响应式设计： 在不同的屏幕尺寸下测试你的样式，确保它们在各种设备上都能正常工作。

总结

通过使用正确的 CSS 选择器和类名，可以精确地控制特定