В чем разница между использованием .Class или #ElementId в CSS?

Question

Мне было интересно ... В CSS есть какие-либо различия между созданием класса стиля и применением его к элементу или созданием стиля с помощью нотации #elementId (помимо возможности назначить класс различным элементам)?

Например ...

#div1
{
 background-color: Yellow;
}

<div id="div1">
    Hello world!
</div>

Или

.div1
{
 background-color: Yellow;
}

<div class="div1">
    Hello world!
</div>

Спасибо! :)

Answer 1

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

Answer 2

Еще одно отличие; Селекторы id более специфичны, чем селекторы классов, поэтому я считаю, что они «превзойдут» любой другой существующий селектор. Вы можете использовать «важный», чтобы сделать то же самое, но и идентификатор селектора может быть проще.

Но id-селекторы следует использовать с осторожностью ...

Answer 3

Есть некоторые отличия:

Уникальность

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

Использование

Идентификаторы должны использоваться для обозначения больших разделов веб-сайта (например, #header) или уникальных элементов, доступ к которым осуществляется через Javascript (например, #killSession)

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

Специфичность

Идентификаторам присваивается значение специфичности 100, а классы стоят только 1.

Итак, это правило:

#id .class

Стоит 101 балл.

Это правило:

#id #id2

Стоит 200 очков и всегда превосходит правило #id .class (независимо от исходного порядка).

Производительность

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

Обсуждение

• Интересное обсуждение производительности селекторов можно найти в блоге Шона Инмана .
• Использование классов обсуждается в Jeff Croft Применение концепций ООП к CSS

Answer 4

По производительности или функциональности разницы нет [цитата нужна].

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

Answer 5

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

однако есть порядок приоритета. Селекторы, использующие идентификатор, имеют больший вес, чем селекторы, использующие класс, и в случае столкновения селектор #id будет иметь приоритет

изменить: см. http://kiribao.blogspot.com/2008/03/css-selectors-precedence-and-ways-to.html для более подробной информации о приоритете селектора

edit: также см. Спецификации w3c на http://www.w3.org/TR/CSS21/cascade.html#specificity

Answer 6

Многие классы могут включать данный «класс», в то время как только один элемент может быть идентифицирован данным ID. Если вам нужно найти уникальный идентификатор использования элемента, в противном случае, если вы хотите отметить много элементов, которые в основном одинаковы, но в разных местах в вашем html, используйте 'class'.

Вы как бы ответили на свой вопрос, это всего лишь механизмы для «идентификации» элементов.

Answer 7

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

Хорошим примером того, что должно иметь идентификатор, является область содержимого вашего документа, для которой обычно используется идентификатор #content. Классы хороши для всего, что может встречаться в вашем документе дважды, например, для заголовков, которые должны иметь специальную разметку или поведение, или для ссылок, которые должны открывать лайтбокс вместо обычного поведения «перейти по URL».

НТН.