Каскадные таблицы стилей используют "id" или "class"

Question

при стилизации определенных HTML-элементов я склонен всегда использовать атрибут класса. Код CSS выглядит чище IMO.

почему существуют оба, какой из них следует использовать и когда?

Answer 1

id s id entify elements. класс es класс элементы ify.

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

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

Answer 2

Вы идете в следующем порядке предпочтения:

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

ID - самый быстрый поиск. Следующим быстрым является поиск по тэгу. Самый медленный по имени класса.

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

Answer 3

Я использую id, если это один элемент, класс, если он применяется более чем к одному

Answer 4

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

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

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

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

Answer 5

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

#nav - применяется к элементу с id = "nav"

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

#nav .left - применяется к любому элементу с class = "left" внутри элемента с id = "nav"

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

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

div.item - применяется к любому элементу div с class = "item"

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

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

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

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

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

Существует еще больше информации о селекторах и специфике. Я нашел этот учебник хорошим обзором селекторов: Выбор учебника

Answer 6

Что касается HTML, то id идентифицирует один элемент в DOM, и каждый элемент может иметь только один уникальный идентификатор, тогда как class классифицирует один или несколько элементов в 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>

Answer 7

1001 * Идентификаторы *

#header
#footer
#sidebar
#menu
#content

классы

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

Answer 8

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

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

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

Answer 9

ID должны быть уникальными в документе. Класс может быть применен (и комбинирован) к нескольким элементам на одной странице.

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

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

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

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

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

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

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

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

и подпрограмма javascript где-то вроде:

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

Примечание: это глупый код, но он должен понять суть

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

Итак, общее практическое правило - , если оно уникально, используйте id, если не используется класс . При необходимости действительно легко изменить id на класс. Это не так легко переключиться обратно.

Answer 10

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

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

Например:

<div id="header" />

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

<div class="item alternate last" />

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

Etc.