如何为特定元素应用 CSS 样式？-html教程-PHP中文网

如何为特定元素应用 CSS 样式？

聖光之護

发布： 2025-10-07 09:59:01

原创

216人浏览过

如何为特定 <li> 元素应用 <a style= 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:

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

.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 文件中，以便更好地组织和维护代码。
响应式设计： 在不同的屏幕尺寸下测试你的样式，确保它们在各种设备上都能正常工作。