В чем разница между идентификатором и классом?

Question

В чем разница между <div class=""> и <div id="">, когда дело доходит до CSS? Можно ли использовать <div id="">?

Я вижу, как разные разработчики делают это обоими способами, и, поскольку я самоучка, я никогда не понимал этого.

Answer 1

ids должен быть уникальным, тогда как class может применяться ко многим вещам. В CSS id s выглядит как #elementID и class элементы выглядят как .someClass

В общем, используйте id всякий раз, когда вы хотите сослаться на определенный элемент, и class, когда у вас есть несколько похожих вещей. Например, общие элементы id - это такие вещи, как header, footer, sidebar. Общими class элементами являются такие вещи, как highlight или external-link.

Это хорошая идея прочитать каскад и понять приоритет, назначенный различным селекторам: http://www.w3.org/TR/CSS2/cascade.html

Самым основным приоритетом, который вы должны понимать, является то, что селекторы id имеют приоритет над селекторами class. Если у вас было это:

<p id="intro" class="foo">Hello!</p>

и

#intro { color: red }
.foo { color: blue }

Текст будет красным, потому что селектор id имеет приоритет над селектором class.

Answer 2

Возможно, аналогия поможет понять разницу:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

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

Можно назначить нескольких учеников под одним Классом , например, по биологии. Но ни в коем случае нельзя ставить нескольких учеников под одного ученика ID .

При подаче Правил по системе внутренней связи, вы можете передать Правила в Класс :

"Завтра все ученики должны надеть красную рубашку на урок биологии".

.Biology {
  color: red;
}

Или вы можете дать правила конкретному ученику, позвонив по его уникальному ID :

«Джонатан Сэмпсон завтра наденет зеленую рубашку».

#JonathanSampson {
  color: green;
}

В этом случае Джонатан Сэмпсон получает две команды: одну в качестве студента на уроке биологии, а другую в качестве прямого требования. Поскольку Джонатану было велено напрямую через атрибут id носить зеленую рубашку, он проигнорирует предыдущую просьбу надеть красную рубашку.

Победят более конкретные селекторы.

Answer 3

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

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

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

Answer 4

Идентификатор должен быть уникальным на всей странице.

Класс может применяться ко многим элементам.

Иногда рекомендуется использовать идентификаторы.

На странице обычно есть один нижний колонтитул, один заголовок ...

Тогда нижний колонтитул может быть в div с идентификатором

и еще есть класс

Answer 5

A CLASS следует использовать для нескольких элементов, для которых требуется одинаковый стиль. ID должен быть для уникального элемента. Смотрите этот учебник .

Вам следует обратиться к стандартам W3C , если вы хотите быть строгим конформистом или если вы хотите, чтобы ваши страницы были проверены по стандартам.

Answer 6

CSS является объектно-ориентированным. ID говорит экземпляр, класс говорит класс.

Answer 7

Классы похожи на категории. Многие HTML-элементы могут принадлежать классу, а HTML-элемент может иметь более одного класса. Классы используются для применения общих стилей или стилей, которые могут применяться к нескольким элементам HTML.

Идентификаторы являются идентификаторами. Они уникальны; никто другой не может иметь такой же идентификатор. Идентификаторы используются для применения уникальных стилей к элементу HTML.

Я использую идентификаторы и классы таким образом:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

В этом примере разделы заголовка и содержимого можно стилизовать с помощью #header и #content. К каждому разделу контента можно применить общий стиль через #content .section. Просто для удовольствия я добавил «специальный» класс для средней секции. Предположим, вы хотите, чтобы определенный раздел имел особый стиль. Этого можно добиться с помощью класса .special, однако этот раздел все еще наследует общие стили из #content .section.

Когда я занимаюсь разработкой на JavaScript или CSS, я обычно использую идентификаторы для доступа к очень конкретному элементу HTML / манипулирования им, а также для использования классов с целью доступа / применения стилей к широкому диапазону элементов.

Answer 8

идентификаторы являются уникальными. Классы нет. Элементы также могут иметь несколько классов. Также классы могут быть динамически добавлены и удалены к элементу.

Везде, где вы можете использовать идентификатор, вы можете использовать класс вместо. Обратное неверно.

Соглашение, по-видимому, заключается в использовании идентификаторов для элементов страницы, которые находятся на каждой странице (например, "navbar" или "menu"), и классов для всего остального, но это всего лишь соглашение, и вы найдете широкую разницу в использовании.

Еще одно отличие состоит в том, что для элементов ввода формы элемент <label> ссылается на поле по идентификатору, поэтому вам нужно использовать идентификаторы, если вы собираетесь использовать <label>. вещь доступности, и вы действительно должны ее использовать.

В прошедшие годы идентификаторы также предпочитались, потому что они легко доступны в Javascript (getElementById). С появлением jQuery и других Javascript-сред это уже не проблема.

Answer 9

Применяя CSS, применяйте его к классу и старайтесь избегать как можно большего числа идентификаторов. Идентификатор должен использоваться только в JavaScript для извлечения элемента или для любой привязки события.

Для применения CSS должны использоваться классы.

Иногда вам нужно использовать классы для привязки событий. В таких случаях старайтесь избегать классов, которые используются для применения CSS, и добавляйте новые классы, которые не имеют соответствующего CSS. Это поможет, когда вам нужно изменить CSS для любого класса или изменить имя класса CSS вместе для любого элемента.

Answer 10

Пространство селектора CSS фактически допускает стиль условного идентификатора:

h1#my-id {color:red}
p#my-id {color:blue}

будет отображаться как ожидалось. Зачем ты это делаешь? Иногда идентификаторы генерируются динамически, и т. Д. Еще одно применение заключалось в том, чтобы отображать заголовки по-разному в зависимости от назначения идентификатора высокого уровня:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Лично я предпочитаю более длинные селекторы классов:

body#list-page .title-block > h1 {font-size:56px}

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

Наконец, когда дело доходит до производительности и приоритета селектора, ID имеет тенденцию выигрывать. Это совсем другая тема.