В чем разница между классами и идентификаторами в CSS? Объясните пример использования

Где я могу использовать идентификаторы и классы? В чем разница между ними? Есть ли необходимость в том, что мы должны принудительно использовать идентификаторы в нашем CSS?

Ответ 1

Идентификаторы должны быть уникальными, а классы лучше для "типа" элемента.

Итак, у вас может быть что-то вроде:

<ul id="menu">
....
</ul>

Поскольку у вас, вероятно, будет только 1 главное меню на вашем сайте.

Для классов, однако, у вас может быть что-то вроде:

<span class='author'>Paolo Bergantino</span>

Или, возможно, для стиля div, который содержит ответ на этом сайте:

<div class='answer'>....</div>

Поскольку на каждой странице будет несколько, это класс элементов. Подумайте о ID как номере социального обеспечения элемента. Всякий раз, когда элемент достаточно важен и уникален, вы даете ему идентификатор. Это также помогает с динамическими веб-сайтами, поскольку выбор элементов по идентификатору является самым быстрым способом, и если у вас есть несколько элементов с одинаковым идентификатором (таким образом, нарушая эту практику), Javascript не будет работать так, как предполагалось.

Ответ 2

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

Например, у вас может быть одно уникальное навигационное меню, идентифицируемое идентификатором:

<div id="nav">...</div>

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

<div id="nav">
    <ul id="content_menu" class="menu">...</ul>
    <ul id="contact_menu" class="menu">...</ul>
    <ul id="personal_menu" class="menu">...</ul>
</div>

Ответ 3

Короче и просто:

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

<style>
    .class {
        font-size: 3em;
    }
    #id {
        font-size: 3em;
    }
</style>

<body>

<span class="class">I am a class</span>

<span class="class">Look at me, also a class</span>

<span id="id">I am special, you can only have one of me or I do not meet XHTML standards</span>

Ответ 4

Из w3schools:

Атрибут id указывает уникальный идентификатор для элемента HTML.

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

Атрибут id может использоваться JavaScript (через HTML DOM) или по CSS для изменения или стиля элемент с указанным идентификатором.

Атрибут class указывает classname для элемента.

Атрибут класса в основном используется для укажите класс в таблице стилей. Однако он также может использоваться JavaScript (через HTML DOM), чтобы сделать изменения элементов HTML с помощью указанного класса.

Атрибут class не может использоваться в следующие HTML-элементы: база, head, html, meta, param, script, стиль и название.

Можно назначить несколько классы для одного элемента HTML, например., Это позволяет объединить несколько CSS классы для одного элемента HTML.

Ответ 5

Пока вы могли использовать классы для всего, разделение между "классами, которые встречаются только один раз" (т.е. идентификаторы) и "обычные классы" весьма полезно для того, чтобы ваш CSS был значимым для вас. p >

.menu { ... } /* Err, how many of those did I have? */
#menu { ... } /* Ahh, THE menu. */

Ответ 6

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