класс div против id

Question

При использовании div когда лучше всего использовать класс против id?

Лучше ли использовать класс, скажем, вариант шрифта или элементы в HTML? Тогда используйте id для структуры / контейнеров?

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

Answer 1

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

Используйте class для группировки элементов, которые ведут себя определенным образом. Например, если вы хотите, чтобы название вашей компании отображалось жирным шрифтом в основном тексте, вы можете использовать <span class='company'>.

Answer 2

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

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

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

Answer 3

Подумайте об университете.

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

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

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

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

"Будут ли завтра на уроках биологии красные рубашки?"

.BiologyClass {
  shirt-color:red;
}

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

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

#JonathanSampson {
  shirt-color:green;
}

Answer 4

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

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

Текст будет белым.

Answer 5

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

Answer 6

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

<h2 id="CurrentSale">Product I'm selling</h2>

Позволит вам в каком-то другом месте ссылаться непосредственно на это место на странице:

<a href="#CurrentSale">the Current Sale</a>

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

Также важно помнить, что существуют более ограниченные правила именования для идентификаторов, в первую очередь они не могут начинаться с цифры. См. Аналогичный вопрос SO: Какое значение допустимо для атрибутов id в html

Answer 7

Стандарт HTML сам отвечает на ваш вопрос:

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

Так что, если вы хотите применить определенные атрибуты стиля CSS только к одному DIV, это будет ID. Если вы хотите, чтобы определенные атрибуты стиля применялись к нескольким DIV, это должен быть класс.

Обратите внимание, что вы можете смешивать оба. Вы можете сделать так, чтобы два DIV принадлежали одному и тому же классу, но дали им разные идентификаторы. Затем вы можете применить стиль, общий для обоих классов, а также специфичные для каждого из них стили для их идентификатора. Браузер сначала применяет стиль класса, а затем стиль идентификатора, поэтому стили идентификаторов могут перезаписывать все, что класс установил ранее.

Answer 8

Некоторые другие вещи, которые нужно иметь в виду:

• При использовании ASP.Net вы не имеете полного контроля над идентификатором элементов, поэтому вам в значительной степени приходится использовать класс (обратите внимание, что это менее верно, чем когда-то).

• Лучше использовать , либо , когда вы можете помочь. Вместо этого укажите тип элемента и это родительский тип . Например, неупорядоченный список, содержащийся внутри div с классом navarea, можно выделить следующим образом:

  div.NavArea ul { /* styles go here */ }
  

Теперь вы можете стилизовать логическое деление для большей части всей вашей наварии с помощью одного приложения класса.

Answer 9

идентификаторы должны быть уникальными. Классы должны быть общими. Итак, если у вас есть CSS-форматирование, которое будет применяться к нескольким DIV, используйте класс. Если только один (как требование, а не случайность), используйте ID.

Answer 10

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

Когда дело доходит до написания вашего css для идентификаторов и CLASS, полезно по возможности использовать минимальные классы css и стараться не перегружать идентификаторы, пока вы НЕ ДОЛЖНЫ, иначе вы будете постоянно стремиться писать более сильные объявления и скоро у вас будет файл !ss, полный! важных.