css - что означает a.extra?

Question

Я смотрю на шаблон CSS, который включает в себя .myClass a.extra{...} и .myClass a.extra:hover{...} Что означает «дополнительный»?

Answer 1

extra - это название класса.

Так как у вас есть:

.myClass a.extra{...}

это правило применяется ко всем элементам a с классом extra, которые являются потомками элемента с классом myClass.

Answer 2

Это класс якоря. Когда CSS говорит что-то вроде a.extra, он ссылается на элемент <a> в html, например:

<a class="extra">Contents</a>

Это пример более общей концепции: x.y относится к любому элементу <x class="y">.

Answer 3

В вашем примере a.extra обозначает тег привязки с именем класса 'extra'.

<a href="http://example.com" class="extra"> Extra link! </a>

Цепные селекторы означают, что оба принадлежат одному и тому же элементу. Поэтому, если бы я хотел выбрать div с идентификатором «foo» и классом «bar», я мог бы определить правило в моем CSS следующим образом:

div#foo.bar {
  /* disco */
}

В то время как использование пробела для разделения (как в вашем примере) определит селектор дочернего атрибута:

<style type="text/css">
.myClass a.extra {
  /* disco */
}
</style>

<div class="myClass">
  <a href="#" class="extra"> disco </a>
</div>

Проверьте больше селекторов атрибутов здесь .

Answer 4

a.extra означает любой элемент привязки с классом «extra».

Вся строка указывает:

Любой элемент привязки с классом «extra», который находится под любымэлементы с классом "myClass"