Каскадные таблицы стилей используют “идентификатор” или “класс”

идентификаторы определяют элементы. классы классифицируют элементы.

Поместите класс на элемент, если "это своего рода..." (например, адрес)

Поместите идентификатор на элемент, если "это..." (например, навигация)

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

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

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

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

Мои причины этого просты: всегда возможно, что, где-нибудь в будущем, Вам, возможно, понадобился бы другой. Если Вы разрабатываете его class, можно просто добавить второй элемент с этим class и Вы хороши для движения. Если Вы разрабатываете его id, затем необходимо или измениться id к a class или (если существует какой-либо код, ссылающийся id) разделите id в обоих id и a class и затем фигура, как разделить атрибуты и ссылки между ними. Намного легче просто разработать его class запускаться с.

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

Прочитайте описание id и class атрибут в спецификации HTML 4.01.

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

Класс является большим количеством формирования рисунка "типа". Можно указать, что элемент должен иметь один или несколько классов, которые описывают свойства об этом.

Например:

<div id="header" />

У Вас только есть один заголовок на данном документе.

<div class="item alternate last" />

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

И т.д.

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

<div id="this-unique-element" class="class1 class2 class3">...</div>

Также с точки зрения CSS, помните, что порядок важности идет от наименее определенного до самого определенного. Так, #id переопределение свойств .class свойства, которые в свою очередь переопределяют tag свойства. Поэтому #id козырь стилей .class стили, если определенные свойства класса не отмечаются !important.

<style>
    #red1, #red2 { color: red; }
    .blue1 { color: blue; }
    .blue2 { color: blue !important; }
</style>

<p id="red1" class="blue1">This text is red.</p>
<p id="red2" class="blue2">This text is blue.</p>

Идентификатор должен быть уникальным в рамках документа. КЛАСС может быть применен (и объединен) к mutiple элементам на той же странице.

Идентификатор не может быть объединен (mutiple идентификатор). Это работает:

<div class="beautiful blonde stupid"> blah blah blah </div>

но это не работает:

<div id="Paris Hilton"> blah blah blah </div>

Динамический HTML обычно использует идентификатор для элементов управления. Элементы с идентификатором имеют самый быстрый 'поиск', как cletus упоминания, когда JavaScript используется в некотором роде, чтобы иметь страницу, взаимодействуют с пользователем.

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

Вообразите страницу с несколькими функциональными отделениями. У каждого отделения был бы тот же класс для отображения общего стиля (т.е. ширина). И каждому отделению нужен уникальный идентификатор для моделирования его, когда это было выбрано. В этой ситуации у Вас могло бы быть что-то вроде этого:

<div class="demo" id="div1" onlick="action()"> blah blah blah </div>

и стандартная программа JavaScript где-нибудь как:

function action() 
{
  document.getElementById( 'div1' ).style.backgroundColor = 'red'
}

Примечание: Это - немой код, но он должен понять через

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

Так, общее эмпирическое правило - если это уникально, используйте идентификатор, если это не класс использования. Действительно легко изменить идентификатор на класс в случае необходимости. Не столь легко переключиться назад.

идентификаторы

#header
#footer
#sidebar
#menu
#content

классы

.important
.warning
.validationError
.recent
.outOfDate
.inactive
.weekDay
.previous
.next
.first
.last

Существует много способов выбрать стиль. Можно использовать идентификатор, классы и теги, и можно объединить их:

#nav - относится к элементу с идентификатором = "военно-морской"

#nav div - относится к любому элементу отделения в элементе с идентификатором = "военно-морской"

#nav .left - относится к любому элементу с классом = "оставленный" в элементе с идентификатором = "военно-морской"

.item span - относится к любому элементу промежутка в элементе с классом = "объект"

.item .address - относится к любому элементу с классом = "адрес" в элементе с классом = "объект"

div.item - относится к любому элементу отделения с классом = "объект"

#nav div span - относится к любому элементу промежутка в элементе отделения в элементе с идентификатором = "военно-морской"

Важный для селекторов CSS, насколько конкретный они. Идентификатор более конкретен, чем класс. С этим стилем:

.dark { color: black; }
#bright { color: white; }

Этот элемент получил бы белый текст, поскольку стиль с помощью идентификатора более конкретен, чем стиль с помощью класса:

<div id="bright" class="dark">Hello world</div>

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

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

<div id="mainForm">
<div id="wrapper">

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

<p class="comments">
<div class="smallText">

Я использую идентификатор, если это - единственный элемент, класс, если это относится больше чем к одному

Вы идете с в этом порядке предпочтения:

1. Идентификатор (должен быть только один на странице);
2. Элемент и класс (например, div.myclass); затем
3. Класс без спецификатора элемента.

Идентификатор является безусловно самым быстрым поиском. Затем самый быстрый поиск tagname. Самый медленный именем класса.

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

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

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