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

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

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

196
class css html id

14 ответов

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

в общем, использовать id всякий раз, когда вы хотите обратиться к определенному элементу и class когда у вас есть несколько вещей, которые все одинаковы. Например, общие id элементы-это такие вещи, как header, footer, sidebar. Common 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 селектор.

292

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

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

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

154

где использовать ID против класса

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

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

15

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

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

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

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

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

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

6

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

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

6

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

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

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

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

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

5

классы как категории. Многие 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 .раздел. Просто для удовольствия я добавил "специальный" класс для средней секции. Предположим, вы хотите, чтобы определенный раздел имел специальный стиль. Этого можно достичь с помощью .специальный класс, но раздел по-прежнему наследует общие стили из #content .раздел.

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

5

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

5

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

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

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

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

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

2

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

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

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

2

любой элемент может иметь класс или ID.

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

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

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

0

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

0

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

для многократного использования, классes пригодится вопреки ids, который должен быть уникальным.

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

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

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

0

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

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

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

4) Пример: -

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

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

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

0