Разница между id и классом в CSS и когда его использовать

<style>
    #main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>

<div id="main">
    Welcome
</div>

Здесь я дал id элементу div и он применил соответствующий CSS для него.

ИЛИ ЖЕ

<style>
    .main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>
<div class="main">
    Welcome
</div>

Теперь я дал class div и он тоже делал для меня ту же работу.

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

ОТВЕТЫ

Ответ 1

Для получения дополнительной информации об этом нажмите здесь.

Пример

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Обратите внимание, что CSS использует префикс # для идентификаторов и . для классов.)

Однако color был атрибутом тега HTML 4.01 <font>, устаревшим в HTML 5. В CSS нет "font-color", стиль color, поэтому выше должно быть указано:

Пример

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

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

Ответ 2

  • Используйте класс, если хотите последовательно создавать несколько элементов на всей странице/сайте. Классы полезны, когда у вас есть или, возможно, будет в будущем, более одного элемента, который имеет один и тот же стиль. Примером может быть div "комментариев" или определенный стиль списка для использования для связанных ссылок.

    Кроме того, данный элемент может иметь более одного класса, связанного с ним, тогда как элемент может иметь только один идентификатор. Например, вы можете дать div два класса, стили которых будут действовать.

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

    Примеры имен классов: тег, комментарий, панель инструментов, предупреждение или сообщение.

  • Используйте Идентификатор, если на странице, на которой будет выполнен стиль, будет одиночный элемент. Помните, что идентификаторы должны быть уникальными. В вашем случае это может быть правильный вариант, так как там предположительно будет только один "главный" div на странице.

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

Хороший способ запомнить это класс - это тип элемента, а - уникальное имя элемента на странице.

Ответ 3

id являются уникальными

  • Каждый элемент может иметь только один id
  • Каждая страница может иметь только один элемент с id

class es НЕ уникальные

  • Вы можете использовать один и тот же class для нескольких элементов.
  • Вы можете использовать несколько class es для одного и того же элемента.

Javascript заботится

JavaScript-пользователи уже, вероятно, более точно согласуются с различиями между class es и id s. JavaScript зависит от наличия только одного элемента страницы с каким-либо конкретным id, иначе не может быть использована обычно используемая функция getElementById.

Ответ 4

Идентификаторы должны быть уникальными - вы не можете иметь более одного элемента с тем же идентификатором в html-документе. Классы могут использоваться для нескольких элементов. В этом случае вы хотели бы использовать идентификатор для "main", потому что он (предположительно) уникален - это "главный" div, который служит контейнером для вашего другого контента, и будет только один.

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

Ответ 5

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

Вот быстрый, упрощенный пример, возьмите теги HTML и HEAD как прочитанные

<body>
    <div id="leftCol">
        You will only have one left column
    </div>
    <div id="mainContent">
        Only one main content container, but.....
        <p class="prettyPara">You might want more than one pretty paragraph</p>
        <p>This one is boring and unstyled</p>
        <p class="prettyPara">See I told you, you might need another!</p>
    </div>
    <div id="footer">
        Not very HTML5 but you'll likely only have one of these too.
    </div>
</body>

Также, как уже упоминалось в других ответах, ID хорошо знакомы с javascript, а классы - меньше. Однако современные фреймворки javascript, такие как jQuery, используют класс и для javascript.

Ответ 6

ID имеют функциональные возможности для работы как ссылки на определенные разделы внутри веб-страницы. ключевое слово после # тега приведет вас к определенному разделу веб-страницы. например " http://exampleurl.com#chapter5" в адресной строке приведет вас туда, когда у вас есть идентификатор раздела 5, обернутый вокруг раздела 5 главы страницы.

Ответ 7

Атрибут class может использоваться с несколькими элементами HTML/тегами, и все это вступит в силу. Где как id предназначен для одного элемента/тега и считается уникальным.

Более того, id имеет более высокое значение специфичности, чем class.

Ответ 8

Вы можете назначить class для многих элементов. Вы также можете назначить более одного элемента class, например.

<button class="btn span4" ..>

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

Ответ 9

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

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

Ответ 10

id:

Он будет идентифицировать уникальный элемент всей вашей страницы. Ни один другой элемент не должен быть объявлен с одним и тем же идентификатором. Селектор id используется для указания стиля для одного уникального элемента. Селектор id использует атрибут id элемента HTML и определяется с помощью "#".

класс:

Селектор классов используется для указания стиля для группы элементов. В отличие от селектора id, селектор классов чаще всего используется для нескольких элементов.

Это позволяет вам установить определенный стиль для многих элементов HTML с тем же классом.

Селектор классов использует атрибут класса HTML и определяется с помощью "."

Ответ 11

Это очень просто понять: -

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

Класс

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

Общее: - для уникальной структуры, такой как разглядывание div и кнопок, мы используем id.

для одного и того же CSS на странице или проекте мы используем класс

id - свет, а класс немного тяжелый

Ответ 12

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

Класс не уникален и применяется к нескольким элементам.

Например:

<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>

Содержимое - это класс, так как он, вероятно, применим к некоторым другим тегам, а также где "veryImportant" используется только один раз и никогда больше.

Ответ 13

Если есть что добавить к предыдущим хорошим ответам, нужно объяснить, почему id должен быть уникальным для каждой страницы. Это важно понимать для новичков, потому что применение одного и того же id к нескольким элементам одной и той же страницы не приведет к какой-либо ошибке и, скорее, будет иметь те же самые эффекты, что и class.

Итак, с точки зрения HTML/CSS уникальность id на странице не создает чувства. Но с точки зрения JavaScript важно иметь один id для каждого элемента на странице, потому что getElementById() идентифицирует, как следует из его названия, элементы их id s.

Итак, даже если вы являетесь чистым разработчиком HTML/CSS, вы должны уважать аспект уникальности id на странице по двум причинам:

  • Ясность: всякий раз, когда вы видите идентификатор, вы уверены, что он не существует в другом месте на той же странице.
  • Scalability: даже если вы разрабатываете только в HTML/CSS, вам необходимо принять во внимание тот день, когда вы или другое разработчик будет продолжать поддерживать и добавлять функциональные возможности вашего сайта в JavaScript.

Ответ 14

В отличие от селектора id селектор class чаще всего используется для нескольких элементов.
Это позволяет установить определенный стиль для многих элементов HTML с тем же классом.

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

Ответ 15

Селектор

id может использоваться для большего количества элементов. вот пример:

CSS

#t_color{
    color: red;
}
#f_style{
    font-family: arial;
    font-size: 20px;
}

HTML:

<p id="t_color"> test only </p>
<div id="t_color">the box text</div>

Я тестировал в Internet Explorer (версия 11.0) и Chrome (ver.47.0). он работает над обоими из них.

"Уникальный" означает только один элемент не может иметь более одного атрибута id, такого как селектор классов. Ни

<p id="t_color f_style">...</p>

ни

<p id="t_color" id="f_style">...</p>