html - 使用具有伪类的 CSS 后代组合器将样式应用于嵌套子级

Question

我们如何将样式应用于父元素 (P) 的子元素 (C)，同时在出现伪类状态时使用后代组合器指定它们的关系？

一个小场景是，当 .menu-item 时，父元素 .menu-item 的子元素 a 需要改变颜色> 悬停在上。这在下面给出的代码中表示:

.menu {
  list-style-type: none;
}
.menu-item {
  padding: 0.5rem;
}
.menu-item a {
  text-decoration: none;
  color: #222;
}
.menu-item:hover .menu-item a {
  color: #a2b;
}

<ul class="menu">
  <li class="menu-item">
    <a href="#" class="menu-link">Home</a>
  </li>
  <li class="menu-item">
    <a href="#" class="menu-link">About</a>
  </li>        
  <li class="menu-item">
    <a href="#" class="menu-link">Contact</a>
  </li>
</ul>

但是，当编写以下代码片段而未明确指定 a 是 .menu-item 的子项时，它会起作用:

.menu-item:hover a {
  color: #a2b;
}

是否有其他方法可以在 CSS 中实现此目的，同时显式指定元素之间的关系？

Answer 1

你说:

However, it works when the following code snippet is written withoutexplicitly specifying that a is a child of .menu-item:

.menu-item:hover a { color: #a2b; }

该代码确实没有明确指定 a 是 .menu-item 的子项。它所说的是

'here's the color for any a that is a descendant of a hoveredmenu-item'

在您的情况下，这就是您想要的，因为 anchor 元素中不会有其他嵌套 anchor 元素，因此您只需更改其中一个的颜色。

这可能是一种更容易维护的表达需求的方式，而不是明确要求 a 是菜单项的子项(而不仅仅是任何后代)，因为如果后来有人将 anchor 元素放置在 div 中，例如您当菜单项悬停时，仍然希望颜色发生变化。

问题中给出的其他代码:

.menu-item:hover .menu-item a {
  color: #a2b;
}

是说

when a menu-item is hovered look for all its menu-item descendants andcolor any of their anchor element descendants.

嵌套菜单项不是您所拥有的结构，因此悬停在菜单项上不会发生任何事情。