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

StackOverflow https://stackoverflow.com/questions/544010

  •  23-08-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

Студент ИДЕНТИФИКАТОР карты разные.Никакие два студента в кампусе не будут иметь одного и того же студента. ИДЕНТИФИКАТОР карта.Однако многие студенты могут и будут делиться хотя бы одним Сорт друг с другом.

Можно объединить нескольких студентов в один Сорт название, например «Биология».Но никогда недопустимо помещать нескольких учеников под одного ученика. ИДЕНТИФИКАТОР.

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

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

.Biology {
  color: red;
}

Или вы можете дать правила конкретному студенту, назвав его уникальный ИДЕНТИФИКАТОР:

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

#JonathanSampson {
  color: green;
}

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

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

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

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

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

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

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

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

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

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

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

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

А СОРТ следует использовать для нескольких элементов, для которых вам нужен одинаковый стиль.Ан ИДЕНТИФИКАТОР должно быть для уникального элемента.Видеть это руководство.

Вам следует обратиться к стандарты 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 является объектно-ориентированным.Идентификатор говорит об экземпляре, класс говорит о классе.

Пространство селектора 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}

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 не подлежит повторному использованию и должен применяться только к одному элементу HTML, тогда как класс div можно добавлять к нескольким элементам.

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

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

4) Пример: -

класс в <style> декларация - .red-background { background-color: red; }

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top