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

本文旨在讲解如何使用 CSS 选择器精准地为特定的 li (列表项) 元素应用样式。我们将探讨如何通过不同的选择器，包括后代选择器，来定位目标 li 元素及其内部的子元素，并提供代码示例，帮助你轻松实现自定义样式的需求。

在网页开发中，经常需要对特定的 HTML 元素应用样式，例如列表项 (<li>)。CSS 提供了多种选择器，可以帮助我们精准地定位这些元素。本文将介绍如何使用 CSS 选择器为特定的 <li> 元素及其子元素应用样式。

使用后代选择器

后代选择器允许你选择特定元素的后代元素。例如，如果你想为所有 <li> 元素下的 <span> 和 <svg> 元素应用样式，可以使用以下 CSS 代码：

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

这段代码会选择所有 <li> 元素下的所有 <svg> 和 <span> 元素，并将它们的文本颜色设置为白色 (#fff)，背景颜色设置为黑色 (#000)。

立即学习“前端免费学习笔记（深入）”；

使用类选择器

类选择器允许你选择具有特定类名的元素。例如，如果你想为一个类名为 nav--icons 的 <ul> 元素下的所有具有 is-active 类的 <a> 元素应用样式，可以使用以下 CSS 代码：

AppMall应用商店

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

56

查看详情

.nav--icons ul li a.is-active {
  color: #fff;
  background-color: #000;
}

.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);
}

这段代码实现了以下效果：

• 当类名为 nav--icons 的 <ul> 元素下的 <li> 元素内的 <a> 元素具有 is-active 类时，将其文本颜色设置为白色，背景颜色设置为黑色。
• 当鼠标悬停在 <a> 元素上，或者 <a> 元素具有 is-active 类时，将其内部的 <span> 元素的透明度设置为 1，最大宽度设置为 40px，并应用 3D 转换效果。

示例 HTML 结构

以下是一个示例 HTML 结构，可以配合上面的 CSS 代码使用：

<ul class="nav--icons">
  <li>
    <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>
</ul>

注意事项

• CSS 选择器的优先级非常重要。如果多个选择器都匹配同一个元素，优先级最高的选择器将生效。
• 使用更具体的选择器可以避免样式冲突。例如，使用类选择器比使用元素选择器更具体。
• 合理组织 CSS 代码，使其易于阅读和维护。

总结

通过使用不同的 CSS 选择器，你可以精准地为特定的 <li> 元素及其子元素应用样式。选择器包括后代选择器、类选择器等。理解 CSS 选择器的原理和使用方法，可以帮助你更好地控制网页的样式，并创建出更加美观和用户友好的网页。

以上就是如何为特定 li 元素应用 CSS 样式？的详细内容，更多请关注php中文网其它相关文章！