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

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

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

Рекомендуется прочитать каскад и понять приоритет, назначенный различным селекторам: [http://www.w3.org/TR/CSS2/cascade.html](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.

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

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

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

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

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

& Лт;!- язык-все: lang-css - >

.Biology {
  color: red;
}

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

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

#JonathanSampson {
  color: green;
}

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

Более конкретные селекторы выигрывают.

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

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

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

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

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

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

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

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

и при этом иметь класс

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

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

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

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

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

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

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

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

Классы похожи на категории. Многие элементы 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 class, но раздел все еще наследует общие стили из #content .section.

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

CSS-пространство селектора фактически допускает условный стиль id:

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 имеет тенденцию побеждать. Это совсем другой предмет.

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

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

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

Любой элемент может иметь класс или идентификатор.

Класс используется для ссылки на определенный тип дисплея, например, у вас может быть класс css для div, который представляет ответ на этот вопрос. Поскольку будет много ответов, нескольким div потребуется один и тот же стиль, и вы будете использовать класс.

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

Технически вы можете использовать классы для всего этого или разделить их логически. Однако вы не можете повторно использовать идентификаторы для нескольких элементов.

Класс предназначен для применения стиля к группе элементов. Стили ID применяются только к элементу с этим ID (он должен быть только один). Обычно используются классы, но если случай единичный, можно использовать идентификаторы (или просто вставить стиль прямо в элемент).

В продвинутой разработке id s мы можем в основном использовать JavaScript.

В повторяемых целях класс пригодится вопреки id s, которые должны быть уникальными.

Ниже приведен пример, иллюстрирующий выражения выше:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Теперь вы можете видеть здесь box и box1 - это два (2) разных < div > элемента, но мы можем применить классы box и bg-color-red к оба из них.

Концепция - наследование на языке OOP.

1. div id не может использоваться повторно и должен применяться только к одному элементу HTML, в то время как div class может быть добавлен к нескольким элементам.

2. Идентификатор имеет большее значение, если оба применяются к одному и тому же элементу и имеют конфликтующие стили, будут применяться стили идентификатора.

3. Элемент стиля всегда ссылается на класс div, помещая a . (точка) перед их именами, в то время как класс div id упоминается путем помещения # (хэша) перед их именами.

4. Пример :-

класс в < style >donal -.red-background {background-color: red; }

id в < style >декларация - # blue-background {background-color: blue;}

< div class = "red-background" id = "blue-background" > Hello < / div > Здесь фон будет синего цвета