Таким образом, возникает вопрос, почему мы должны использовать несколько class, а не id?
Поскольку в спецификации HTML так сказано , нарушение правил часто приводит к нарушению кода.
Имеет ли смысл идентифицировать несколько элементов по одному и тому же идентификатору? Думаю, нет. Вот для чего нужны классы: классифицировать похожих элементов.
Теперь лучшая часть, если я использую #title или .title при определении стилей (при условии, что они появились более одного раза и имеют другого родителя), вывод, который генерирует CSS, одинаков.
Это естественное поведение, а не ошибка в любых браузерах, которые делают это per se . Тем не менее, это не тот тип поведения, на который вы должны полагаться, поскольку он имеет дело с несоответствующей разметкой, которая обычно является плохой.
У меня сложилось впечатление, что так же, как JS Renderer, CSS Parser останавливает итерацию, когда обнаруживает первый #title, но не происходит, он продолжает итерацию, пока не достигнет EOF, как class.
Теперь это неправильно. CSS-синтаксические анализаторы выполняют селекторное сопоставление для каждого элемента : они не берут правило и обходят DOM, применяя его к любым элементам, которые ему соответствуют; вместо этого они берут каждый элемент и пытаются сопоставить его с максимально возможным количеством правил. Работая таким образом, парсер не знает , используется ли идентификатор в другом месте документа, и не заботится об этом. Это просто соответствует в соответствии с тем, что элемент говорит, что это . Этот ответ описывает его более подробно.
Пока элемент имеет определенный идентификатор, он должен совпадать с любыми селекторами идентификаторов, которые ищут этот конкретный идентификатор. Таким образом, ожидается, что парсеры будут сопоставлять любые и все элементы с данным идентификатором с одним селектором идентификатора, даже если в HTML неправильно иметь несколько элементов с одинаковым идентификатором. Другими словами, CSS не обеспечивает уникальность идентификаторов, которая требуется для HTML. Этот ответ объясняет.
С учетом всего вышесказанного, нижняя строка: присваивает идентификатор только одному элементу за раз и использует классы для группировки нескольких похожих элементов. Не пытайтесь быть умным и нарушать правила.