HTML-классы с идентификаторами - PullRequest
Новая
       9

HTML-классы с идентификаторами

4 голосов
/ 03 мая 2009

Меня немного смущают классы и идентификаторы HTML, так как я бы хотел использовать их ОБА для описания элемента HTML. Это допустимо и поддерживается большинством браузеров?

Мотивация для меня использовать оба:

  1. У меня есть стиль CSS, который я хотел бы применить к нескольким элементам.
  2. У меня есть несколько AJAX и Javascript, которые будут манипулировать теми же элементами, поэтому мне нужен способ определить, какой элемент какой, используя идентификатор.
  3. Так что я хотел бы использовать идентификатор для идентификации каждого элемента для манипуляции JS И в то же время я хотел бы указать класс, чтобы тот же стиль применялся из одного и того же CSS.

Ответы [ 6 ]

8 голосов
/ 03 мая 2009

Идентификатор будет уникальным только для одного элемента, где класс может использоваться для группировки множества элементов вместе. Вы можете использовать их вместе, как вы заявили, ID как уникальный идентификатор для Javascript и класс для разметки с помощью CSS.

Найдите html class против id , чтобы получить много статей на эту тему.

Пример: 

<ul>
    <li class="odd" id="item1">First Item in the List</li>
    <li class="even" id="item2">Second Item in the List</li>
    <li class="odd" id="item3">Third Item in the List</li>
</ul>
7 голосов
/ 03 мая 2009

Да, вполне допустимо использовать свойства ID и Class в одном элементе. Пример: 

<div class="infoBox" id="myUniqueStyle"> *content* </div>

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

Хороший способ сделать это - применить идентификаторы ко всем элементам, которые, как вы знаете, уникальны (заголовок, навигация, основные контейнеры и т. Д.) И классы ко всему остальному.

«Is the » применяется к элементам, использующим идентификатор: «This - это панель навигации», «this - это header»

«Is a » или «is an » применяется к элементам, использующим классы: «This является blogPost», «this является infoBox "и т. Д.

2 голосов
/ 03 мая 2009

Вы можете определенно использовать оба, если вам нужно.

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

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

Типичный HTML-документ, использующий идентификаторы и классы, может выглядеть примерно так: 

<html>
...
<body>
<div id="header"></div>
<ul id="nav" class="full-width dark">...</ul>
<div id="content">
<div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div>
</div>
</body>
</html>
0 голосов
/ 04 мая 2009

Просто очень неясное замечание о комбинировании класса и идентификатора в ваших объявлениях CSS, есть ошибка с IE6, если у вас есть:

  • две или более страниц, которые имеют элемент с таким же id

  • эти элементы имеют разные class ы

  • вы стилизуете их, используя #idname.classname правило

тогда вступит в силу только первое правило в таблице стилей.

Подробнее см. на этой странице

0 голосов
/ 03 мая 2009

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

0 голосов
/ 03 мая 2009

Да, любой нормальный браузер должен разрешать установку классов CSS независимо от идентификатора элемента. Однако установка стилей для определенного элемента (например, с помощью идентификаторов) может переопределить стили, заданные с помощью класса CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...