如何使用 CSS 更改锚点内 span 和 i 的颜色？

Question

我正在尝试更改锚标记内所有元素的颜色。这些元素是 i 和 span。但是，我无法让我的解决方案起作用。我应该在CSS中一个一个地改变颜色吗？

HTML 和 CSS

.active-link {
  color: #2268ff;
}

<li class="nav__item">
  <a href="#home" class="nav__link active-link">
    <i class="bx bx-home nav__icon"></i>
    <span class="nav__name">Home</span>
  </a>
</li>

Answer 1

您可以直接将class名字添加到“li”标签中

.active-link {
  color: #2268ff;
}

<li class="nav__item active-link">
  <a href="#home" class="nav__link ">
    <i class="bx bx-home nav__icon"></i>
    <span class="nav__name">Home</span>
  </a>
</li>

Answer 2

您分享的内容应该有效。如果这不起作用，我怀疑其他 CSS 规则覆盖了您的 CSS。默认情况下，不应将样式附加到 <span> 或 <i> 元素。他们可能会从浏览器（用户代理样式表）或（如您的情况）获得一个它应该来自其父级（继承自）。 Screenshot from browser developer tools

Answer 3

.active-link > * {
    color: #2268ff;
}

<li class="nav__item active-link">
  <a href="#home" class="nav__link ">
    <i class="bx bx-home nav__icon"></i>
    <span class="nav__name">Home</span>
  </a>
</li>

如何使用 CSS 更改锚点内 span 和 i 的颜色？

How do I change the color of the span and i inside an anchor with CSS?

html

css

web