0

“li:hover > a”和“li a:hover”是一样的吗

在代码中

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

和

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

4 回答 4

3

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

 li a:hover

方法：当用户将鼠标放在元素的后代上时，将这些规则应用于a元素的后代。li

 li:hover > a

意味着：当用户将鼠标放在后者上时，将这些规则应用于a元素的直接子元素。li

如您所见，有几个不同之处。

  1. 首先，第一个选择器会将规则应用于锚点，仅当锚点本身悬停时；这意味着如果您有一个小于父列表项的锚元素，则必须将鼠标放在锚上才能触发更改。
  2. 另一方面，第二个选择器将规则应用于锚点，无论鼠标悬停在其父级上。
  3. 第二条规则使用>，也称为直接后代选择器或子选择器a，仅当标签直接包含在li没有中间容器的情况下才会应用规则。
于 2013-07-24T03:52:41.790 回答
1

不，

li:hover > a将更改悬停a时 的样式，将更改悬停时的样式。lili a:hoveraa

在这里查看区别：http: //jsfiddle.net/uzyUr/

此外>，子选择器a必须是直接嵌套的，li而空间是任何后代选择器，因此可以a嵌套任意深度li

于 2013-07-24T03:47:24.943 回答
0

答案是不。

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

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>

第一个不起作用，但第二个会起作用。

但是如果你有 '>' 喜欢

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

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

于 2013-07-24T03:47:08.597 回答
0

这是demo了解demo

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

下一个悬停在文本之外，然后您的a颜色将变为红色

结论

ul#navigation li a:hover

当 a 悬停时，a 的样式将会改变

ul#navigation li:hover > a

当 li 悬停时，a 的样式会改变

于 2013-07-24T03:58:24.130 回答