Разница между div id и div-классом

Ответ 1

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.

Ответ 2

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

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

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

Хорошо, чтобы добавить нескольких учеников под один заголовок Класс, например "Биология". Но никогда не было приемлемо, чтобы несколько учеников обучались под одним студентом ID.

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

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

.Biology {
  color: red;
}

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

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

#JonathanSampson {
  color: green;
}

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

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

и все еще имеют класс

Ответ 5

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

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

Ответ 6

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

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

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

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

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

Ответ 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-элементом, и я использую классы для доступа/применения стилей к широкому диапазону элементов.

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

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

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

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

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

Ответ 13

В расширенном развитии id s мы можем в основном использовать JavaScript.

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

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

<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.