悬停语法差异

Question

有什么区别：

a.cvc-formsHelpText:hover {
text-decoration:none;
}

和

.cvc-formsHelpText:hover {
text-decoration:none;
}

HTML是：

<a class="cvc-formsHelpText" href="javascript: void(0)">
<img src="img.gif">
<span>Text.</span>
</a>

第一个有效，第二个无效，但都引用<a>标记。

Answer 1

它与悬停毫无关系。

#id element.class:pseudo-selector {
  property: value;
}

这是一般语法。第一个选择器有效，因为它选择cvc-formsHelpText类，而不是试图无效地定位不存在的cvc-formsHelpText 元素。

Answer 2

问题，当你说第二个不起作用时，就是你省略了一个点，正如BoltClock所指出的那样：.cvc-formsHelpText

对于两种语法之间的区别，前者表示该元素必须是具有类cvc-formsHelpText的锚。后一个选择器（假设您包含已省略的点）适用于具有类cvc-formsHelpText的任何元素。显然，如果只有锚元素包含该类，那么您的网站行为方式就没有明显差异。

Answer 3

a.blah为锚标签定义了一个类（“a”标签）。 .blah为任何标签定义了一个类。

Answer 4

cvc-formsHelpText是一个班级。你需要一个 ”。”如果你想要它的样式，在它面前。

.cvc-formsHelpText:hover {
text-decoration:none;
}

Answer 5

cvc-formsHelpText:hover表示：名为cvc-formsHelpText的元素悬停。例如，<cvc-formsHelpText>，它不存在。

a.cvc-formsHelpText:hover表示：<a>标记，类cvc-formsHelpText，悬停。

Answer 6

第一个说明发现所有“a”标签都有CSS“class”属性的“cvc-formsHelpHext”。第二个查找名为“cvc-formsHelpHext”的标签，这不是你想要做的。