悬停语法差异答案

【问题标题】：Hover syntax difference悬停语法差异
【发布时间】：2011-10-22 13:09:44
【问题描述】：

有什么区别：

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>标签。

【问题讨论】：

【解决方案1】：

cvc-formsHelpText 是一个类。你需要一个 ”。”如果您想对其进行样式设置，请在其前面。

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

【讨论】：

【解决方案2】：

它根本与悬停无关。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

关于这两种语法的区别，前者表示元素必须是类cvc-formsHelpText的锚点。后一个选择器（前提是您包含已省略的点）适用于类cvc-formsHelpText 的any 元素。显然，如果只有锚元素包含该类，则您的网站行为方式不会有明显的差异。

【讨论】：

【解决方案5】：

第一个表示找到所有“a”标签，CSS“class”属性具有“cvc-formsHelpHext”。第二个查找名为“cvc-formsHelpHext”的标签，这不是您想要做的。

【讨论】：

【解决方案6】：

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

【讨论】：