css - 悬停属性声明困惑

Question

我在查看悬停属性时很困惑。

.accordian ul:hover li {
    width: 50px;
}    
.accordian ul li:hover {
    width: 700px;
}

这两行有什么区别？是不是第一个 ul 属性悬停了 50px 而在第二行 li 元素悬停了？如果是这样，那么在第一行为什么要声明 li？

Answer 1

第一个声明说当 ul 的任何部分悬停时，使其所有后代 li 的宽度为 50px。

第二个声明说当 ul 的后代 li 悬停时，将其宽度设置为 700px。

对于这两个声明，条件是列表是 .accordian 的后代。但我希望这与问题的含义无关。

希望这可以帮助您直观地理解:http://jsfiddle.net/zey4aLr9/8/