为什么css元素>元素在以下实例中作为意外工作

Question

所以我决定将三个div用于实验目的

<div> 
  <div> 
    <div> 
    </div>
  </div>
</div>

然后我继续前进并决定使用css如下定位内部div:

div {
  border: 1px solid black;
  padding: 40px;
  background: white;
}

div > div:hover { 
  box-shadow: 0 0 0 40px white;
}

div > div:hover{
  box-shadow: 0 0 0 80px white;
}

我期望发生的是,要么打破页面,要么一次选择所有的div.然而,奇怪的是,它一个接一个地瞄准div,如果你愿意的话就会传播.

div {
  border: 1px solid black;
  padding: 40px;
  background: white;
}

div > div:hover { 
    box-shadow: 0 0 0 40px white;
}

div > div:hover{
    box-shadow: 0 0 0 80px white;
}

<div>
    <div> 
        <div>
        </div>
    </div>
</div>     

Answer 1

实际上只使用了这个最后一个类(CSS通常使用最后定义的类属性,但有一些例外,例如ID选择器,!important声明等):

div > div:hover {
  box-shadow: 0 0 0 80px white;
}

你有三个div嵌套的元素.所以div层次结构中的第二个服从规则(它是第一个的直接后代div),div层次结构中的第三个也服从规则......它是div层次结构中第二个的直接后代.

没有什么是破坏或意外的.直接后代运算符>在您的情况下完全正常工作.