Разница в синтаксисе наведения

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

a.blah определяет класс для тегов привязки (тег «a»). .blah определяет класс для любого тега.

Answer 2

Проблема, когда вы говорите, что вторая не работает, заключается в том, что вы пропустили точку, как указывает BoltClock: .cvc-formsHelpText

Что касается различия между двумя синтаксисами, первый означает, что элемент должен быть якорем с классом cvc-formsHelpText.Последний селектор (при условии, что вы включили опущенную точку) применяется к любому элементу с классом cvc-formsHelpText.Очевидно, что если только якорные элементы содержат этот класс, то не будет ощутимой разницы в поведении вашего сайта.

Answer 3

Это никак не связано с зависанием.

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

Это общий синтаксис.Первый селектор работает, потому что он выбирает класс cvc-formsHelpText, а не пытается бесполезно нацелиться на несуществующий cvc-formsHelpText элемент .

Answer 4

Первый говорит, что найдены все теги "a", которые имеют "cvc-formsHelpHext" для атрибута CSS "class".Второй ищет теги с именем "cvc-formsHelpHext", а это не то, что вы пытаетесь сделать.

Answer 5

cvc-formsHelpText:hover означает: элемент с именем cvc-formsHelpText, зависший.Например, <cvc-formsHelpText>, который не существует.

a.cvc-formsHelpText:hover означает: тег <a> с классом cvc-formsHelpText, зависший.

Answer 6

cvc-formsHelpText это класс.Тебе необходимо "."перед ним, если вы хотите стилизовать его.

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