css 样式？" /> 元素应用 css 样式？" />
本文旨在帮助开发者理解如何针对特定的 <li> 元素应用 CSS 样式，使其在默认状态下或悬停时呈现特定的视觉效果。我们将通过详细的代码示例和解释，展示如何使用 CSS 选择器和类名来实现这一目标，并提供一些最佳实践建议，确保样式的正确应用和代码的可维护性。
精确选择器：针对 <li> 元素及其子元素的样式控制
要精确地控制特定 <li> 元素的样式，关键在于使用正确的 CSS 选择器。以下是一些常用的方法：
1. 直接选择 <li> 元素及其子元素：
如果你想将样式应用于 <li> 元素下的所有 svg 和 span 元素，可以使用以下 CSS 规则：
立即学习“前端免费学习笔记（深入）”；
li svg, li span {
color: #fff;
background-color: #000;
}这个规则会选择所有 <li> 元素内部的 svg 和 span 元素，并应用指定的颜色和背景色。
2. 使用类名进行更精细的控制：
如果需要更精细的控制，建议为 <li> 元素或其子元素添加类名，然后使用这些类名作为 CSS 选择器。例如：
HTML:
<li class="nav-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:
.nav-item svg {
color: #fff;
background-color: #000;
}
.nav-item .selected2 {
opacity: 1;
max-width: 40px;
transform: translate3d(0, 0, 0);
}在这个例子中，.nav-item svg 选择器只会影响带有 nav-item 类名的 <li> 元素内部的 svg 元素。.nav-item .selected2 选择器只会影响带有 nav-item 类名的 <li> 元素内部的带有 selected2 类名的 span 元素。
3. 模拟 :hover 效果：
如果需要模拟 :hover 效果，可以使用 JavaScript 添加或移除类名。例如，当页面加载时，为特定的 <li> 元素添加一个 active 类：
HTML:
<li class="nav-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:
.nav--icons ul li a.is-active {
color: #fff;
background-color: #000;
}
.nav--icons ul li a.is-active span {
opacity: 1;
max-width: 40px;
transform: translate3d(0, 0, 0);
}
.nav-item.active svg {
color: #fff;
background-color: #000;
}
.nav-item.active .selected2 {
opacity: 1;
max-width: 40px;
transform: translate3d(0, 0, 0);
}或者使用 JavaScript：
// 获取需要默认激活的li元素
const homeLi = document.querySelector('.nav-item');
// 添加 'active' 类
homeLi.classList.add('active');这样，<li> 元素在页面加载时就会呈现 :hover 时的样式。
注意事项
- CSS 优先级： 确保你的 CSS 规则具有足够的优先级，以便覆盖其他可能应用的样式。可以使用更具体的选择器或 !important 声明（谨慎使用）。
- 代码可维护性： 使用有意义的类名，并避免过度使用内联样式。将样式定义放在 CSS 文件中，以便更好地组织和维护代码。
- 响应式设计： 在不同的屏幕尺寸下测试你的样式，确保它们在各种设备上都能正常工作。
总结
通过使用正确的 CSS 选择器和类名，可以精确地控制特定 <li> 元素的样式。根据你的具体需求，选择合适的方法，并遵循最佳实践，可以确保样式的正确应用和代码的可维护性。 记得考虑CSS优先级和响应式设计，确保你的样式在各种情况下都能正常工作。
