класс или ID

Question

Дубликат:

• Каскадные таблицы стилей используют «id» или «class»
• CSS: взаимозаменяемы класс и id?
• класс деления против идентификатора
• CSS: div id VS. div класс

Иногда, когда я хотел бы сделать выбор, добавить идентификатор (уникальный) к чему-либо (изображениям), и я использовал jquery, чтобы делать прилавки при наведении курсора или клике.

Но то же самое можно сделать с классами. Я понимаю, что класс для многих вещей (скажем, class = "selected"), но когда класс добавляется к чему-то, я могу вызвать действие jQuery с этим классом, вставленным в ID ...

Так что вопрос в том, каков "правильный способ" использовать класс и ID, если я могу достичь чего угодно и всего с обоими!

Answer 1

Где использовать идентификатор против класса

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

ID - невероятно мощный инструмент. Элемент с идентификатором может быть целью фрагмента JavaScript, который каким-либо образом манипулирует элементом или его содержимым. Атрибут ID может использоваться как цель внутренней ссылки, заменяя теги привязки атрибутами имени. Наконец, если вы сделаете свои идентификаторы ясными и логичными, они могут служить своего рода «самостоятельной документацией» в документе. Например, вам необязательно добавлять комментарий перед блоком, заявляя, что блок кода будет содержать основное содержимое, если открывающий тег блока имеет идентификатор, скажем, «main», «header», «footer». и т. д.

Answer 2

Разница в том, что идентификатор является чем-то уникальным для документа, поэтому его следует использовать только для одного элемента на данной странице HTML.

С другой стороны, классы больше похожи на категории элементов. Например, если вы просматриваете одну запись в блоге, где комментарии к этой записи блога обычно отображаются прямо под ней, вы можете присвоить всем этим комментариям класс «comment» и одну запись в блоге с идентификатором «entry» ,

Answer 3

HTML-идентификатор можно применять только к одному элементу, тогда как класс можно использовать для многих, что делает его более гибким.

Answer 4

Идентификатор уникальным образом идентифицирует элемент во всем документе, тогда как имя класса похоже на «тег» - многие теги могут быть добавлены к элементу, и теги могут использоваться повторно.

Вот список сравнения:

• Вы можете добавить несколько имен классов к элементу, разделенному пробелами, но вы можете добавить только один идентификатор.
• Вы можете повторно использовать имя класса для нескольких элементов, но можете использовать идентификатор только один раз во всем документе.
• Идентификатор можно использовать в качестве идентификатора фрагмента в URL-адресе, и браузер перейдет к этому идентификатору. Например, <a href="http://example.com/mypage.htm" rel="nofollow noreferrer">http://example.com/mypage.htm</a><b>#someid</b>. Это невозможно сделать с помощью классов.
• Идентификатор позволяет легко и эффективно найти определенный элемент в Javascript. Например, document.getElementById('someid') (или $("#someid") в jQuery). Обратите внимание, что библиотеки, такие как jQuery, также позволяют находить элементы по имени класса, но это не так эффективно.

Другие свойства идентификаторов

• Элемент может содержать как идентификатор, так и количество имен классов, и это не имеет значения или ничего не значит, если идентификатор совпадает с одним из имен классов.
• Фреймы, фреймы и традиционные всплывающие окна считаются отдельными документами, поэтому можно использовать один и тот же идентификатор для элементов в этих разных окнах.
• Некоторые браузеры не следуют спецификации должным образом и допускают многократное использование одного и того же идентификатора, а также его поведение в некотором роде, похожее на имя класса, но все равно работает в document.getElementById(). Например, селектор CSS на основе этого идентификатора может соответствовать нескольким элементам, как если бы это был класс. Это действительно грязная ситуация, и вы никогда не должны полагаться на нее. Я был бы рад, если бы браузеры перестали пытаться поддерживать это.