(.bmenu:hover li a) VS (.bmenu li a:hover) -差异？

Question

我想问任何人谁可以帮助我在这两个CSS标签之间的区别。

.bmenu:hover li a{...}

VS

.bmenu li a:hover{...}

非常感谢你的帮助，为我糟糕的英语而道歉。

编辑1:我主要想要求解释一下，它们是如何工作的，因为在第一种情况下，在:hover后面有一个"li a“。这是什么意思？Thx

Answer 1

为了解释这一点，我将使用以下示例代码：

<div class="bmenu">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
</ul>
</div>

如果你使用.bmenu:hover，你会说当你悬停在 hover .bmenu div上时，你想要应用CSS。

当您说.bmenu li a:hover时，您是说当您将a标记悬停在.bmenu li中时，您想要应用CSS。

下面是我创建的一个快速示例，顶部使用.bmenu:hover方法，底部使用li a:hover方法。fiddle here。

Answer 2

在第一种情况下，<a>将在您悬停.bmenu时应用样式，在第二种情况下-当您悬停<a>本身时。看一下这两个块：

​

.bmenu1, .bmenu2 {
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 40px;
    background-color: orange;
}
a {
    display: block;
    height: 100%;
    width: 100%;
    background-color: firebrick;
}
.bmenu1:hover a {
    background-color: lightblue;
}
.bmenu2 a:hover {
    background-color: lightblue;
}

<div class="bmenu1">
    <a href="#"></a>
</div>
<div class="bmenu2">
    <a href="#"></a>
</div>

​