html - 将样式应用于某个类的这两种 CSS 符号之间有区别吗？

Question

我在 CSS 页面上看到了以下两种符号，它们的工作方式似乎相同，它们之间有区别吗？

.ClassName  a:hover

和：

a.ClassName:hover

Answer 1

是的，它们之间是有区别的。

.ClassName a:hover指的是任何悬停在带有 的元素内的锚点class="ClassName"。

a.ClassName:hover，然而，指的是任何悬停的锚点有 class="ClassName"。

W3.org上有很多关于CSS 选择器的信息。

Answer 2

.ClassName  a:hover //this applies to all child `a` elements of `ClassName`
<div class="ClassName">
  <a>link</a>
</div>

a.ClassName:hover //this applies to the `a` elements that have `ClassName` class
<div>
  <a class="ClassName">link</a>
</div>

Answer 3

a.ClassName:hover

<a class="ClassName" href="#">fff</a>

.ClassName a:悬停

<div class="ClassName">
  <a href="#">fff</a>
</div>

第一种方法仅适用于<a>具有 class 的元素ClassName。
第二种方法，类可以用于任何元素，如果该元素包含<a>悬停属性将被处理。

Answer 4

是的，绝对有区别。

• 第一个匹配悬停的锚点，它们是具有 class 的元素的后代ClassName。
• 第二个匹配悬停的锚点与 class ClassName。

Answer 5

.ClassName a:hover表示anchor在里面.ClassName。它是

HTML

<div class="ClassName ">
 <a></a>
</div>

或者

a.ClassName:hover表示.ClassName带有anchor. 它是

HTML

<a vlass="ClassName"></a>

Answer 6

第一个修改已应用hover的任何元素内的任何链接的属性。ClassName

第二个适用于任何a已ClassName申请的内容，无论是否有任何关闭容器或标签。