为什么我的悬停样式适用于子元素？

Question

我已经阅读了MDN关于儿童组合子的说法：

  

子组合子（＆gt;）位于两个CSS选择器之间。它仅匹配第二个选择器匹配的元素，这些元素是第一个匹配的元素的子元素。第二个选择器匹配的元素必须是第一个选择器匹配的元素的直接子元素。

我不明白为什么其他两个<li>元素也是红色的。

.list > li:hover{
  color:red
}

<ul class="list">
  <li><a href="#">I should be red</a>
    <ul>
      <li><a href="">Why I am red too？</a></li>
      <li><a href="">Why I am red too?</a></li>
    </ul>
  </li>
</ul>

Answer 1

使用.list > li，您还包括all父列表的子项（包括第二个ul）

覆盖它的一种方法是显式设置第二个列表的属性：

https://jsfiddle.net/6yeh6ggL/4/：

.list li a:hover{
 color:red
}

.list ul li a:hover{
 color:black
}

Answer 2

只是为了澄清一点。

您的选择器正在找到您想要的li项目，这是第一个（它只找到那个）。所有li变成红色的原因是因为颜色被设置为由其子项继承的第一个li，并且在上面的情况下，li是其子项。