在CSS3中，“li：hover＆gt; a”和“li a：hover”相同

Question

是“li：hover＆gt; a”和“li a：hover”相同的

如代码

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;}

和

ul#navigation li:hover > a {
background:#fff;}

Answer 1

根本不是，它们是两个非常不同的选择器。

 li a:hover

表示：当用户将鼠标悬停在a元素<{1}}元素的后代时，应用这些规则前者。

li

表示：当用户放置鼠标时，将这些规则应用于 li:hover > a 元素，即a元素的直接子对后者。

---

如您所见，存在一些差异。

1. 首先，只有当锚本身悬停时，第一个选择器才会将规则应用于锚点;这意味着如果您的锚元素小于父列表项，则必须将鼠标放在锚点上以触发更改。
2. 另一方面，第二个选择器将规则应用于锚点，只要鼠标悬停在其父节点上。
3. 第二条规则包含li，也称为直接后代选择器或child selector，只有在直接包含>标记时才会应用规则在a内，没有中间容器。

Answer 2

没有

li:hover > a会在a悬停时更改li的样式，li a:hover会在a时改变a的样式悬停。

请参阅此处的差异：http://jsfiddle.net/uzyUr/

更多>是子选择器，因此a必须直接嵌套在li中，而空格是任何后代选择器，因此a可以嵌套为深入li，如你所愿

Answer 3

答案是否定的。

在这部分中，触发悬停的元素将是链接。

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;}

在此处，触发悬停的元素是li

ul#navigation li:hover {
background:#fff;}

但如果你有这样的事情：

<ul>
 <li><a href="#"></a></li>
</ul>

CSS都可以使用。另一方面，如果你做这样的事情：

<ul>
 <li><div></div></li>
</ul>

第一个将无效，但第二个将无效。

但如果你有'＆gt;'像

ul#navigation li:hover > a{
    background:#fff;}

对于链接或<a>标记，两者在技术上都是相同的，但当然<li>必须在链接之前出现。

Answer 4

这是了解demo

的演示

首先将鼠标悬停在文字上，然后您的a颜色将变为绿色

然后将鼠标悬停在文字外，然后您的a颜色将变为红色

<强>结论

ul#navigation li a:hover

当a徘徊时，

的样式将被改变

ul#navigation li:hover > a

当李徘徊时，

的风格会被改变