Hover syntax difference

What is the difference between:

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

开发者_StackOverflow中文版And:

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

The HTML is:

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

The first works and the second not, but both refer to <a> tag.

The problem, when you're saying that the second doesn't work, is that you've omitted a dot, as BoltClock points out: .cvc-formsHelpText

As for the difference between the two syntaxes, the former denotes that the element must be an anchor with the class cvc-formsHelpText. The latter selector (provided that you include the dot that you've omitted) applies to any element with the class cvc-formsHelpText. Obviously, if only anchor elements contain that class, there will be no perceived difference in the way your website behaves.

It has nothing to do with hover at all.

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

That's the general syntax. The first selector works because it's selecting the cvc-formsHelpText class, not trying to fruitlessly target a non-existent cvc-formsHelpText element.

a.blah defines a class for anchor tags (the "a" tag). .blah defines a class for any tag.

cvc-formsHelpText is a class. You need a "." in front of it if you want to style it.

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

cvc-formsHelpText:hover means: an element named cvc-formsHelpText, hovered. For example, <cvc-formsHelpText>, which doesn't exist.

a.cvc-formsHelpText:hover means: an <a> tag, with class cvc-formsHelpText, hovered.

The first says that all "a" tags are found that have "cvc-formsHelpHext" for the CSS "class" attribute. The second looks for tags named "cvc-formsHelpHext", which is not what you are trying to do.