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

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

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

idsдолжен быть уникальным, где classможно применить ко многим вещам. В CSS ids выглядит #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селектором.

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

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

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

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

Давая правил по системе школьного интерком, вы можете дать правила для в классе :

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

.Biology {
  color: red;
}

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

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

#JonathanSampson {
  color: green;
}

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

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

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

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

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

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

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

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

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

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

<div id = "footer" class = "...">

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

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

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

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

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

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

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

В прошлые годы идентификаторы также предпочитались, потому что они легко доступны в 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, однако раздел все еще наследует общие стили из #content .section.

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

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

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

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

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

Пространство селектора 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 имеет тенденцию выигрывать. Это совсем другая тема.

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

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

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

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

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

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

Для повторяющихся целей классы es пригодятся вопреки идентификаторам, которые должны быть уникальными.

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

<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 классы для них обоих.

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

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

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

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

4) Пример: -

класс в <style>объявлении -.red-background { background-color: red; }

идентификатор в <style>объявлении - #blue-background {background-color: blue;}

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

idи classдва глобальных / стандартных атрибута HTML (Глобальные атрибуты, приведенные ниже, можно использовать для любого элемента HTML.)

class Определяет одно или несколько имен классов для элемента (относится к классу в таблице стилей)

id Определяет уникальный идентификатор для элемента

Атрибуты id дают уникальный для элемента документ уникальный идентификатор, где атрибут class предоставляет способ классификации похожих элементов.

Значение атрибута id должно быть уникальным для всей HTML-страницы, где атрибут класса может использоваться повторно везде, где вы хотите применить те же свойства

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

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

Следует отметить, что если мы используем в элементе class и id, * id идентифицирует атрибуты класса. * Просто потому, что id предназначен исключительно для одного элемента.

Смотрите пример ниже

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Мы генерируем вывод

Вывод