Соглашения о селекторе CSS: почему Chrome предлагает вам выбирать через #id, когда это возможно?

Question

Пример: у меня есть этот элемент:

<div id="foo" class="my-foo"></div>

Если я нажму кнопку "+" в консоли Chrome

Chrome будет "предложить"чтобы выбрать div через его идентификатор, а не через класс, например:

div#foo{}

Разве это не неправильно для элементов стиля через их идентификаторы?

Answer 1

При добавлении правила стиля для элемента с идентификатором инспектор обычно предполагает, что вы хотите стилизовать только этот элемент, а не любые другие элементы div или элементы, которые совпадают с .my-foo, отсюда и предложениеСелектор идентификатора.

Мне не понятно, почему он добавляет селектор типа к идентификатору.Если он пытается защититься от повторяющихся идентификаторов, он, безусловно, не помешает селектору сопоставить два div с одним и тем же идентификатором, что гораздо более вероятно, чем два элемента разных типов, имеющих одинаковый идентификатор.