Стиль CSS div - я должен использовать class или id?

Question

У меня есть повторитель div, который выглядит примерно так:

<div class="header_div">
    <!-- Content -->
</div>

Я хочу, чтобы цвет фона изменения div был основан на динамическом свойстве содержимого div (давайте назовем его категорией), но я все же хочу, чтобы стиль "header_div" определялся в тех случаях, когда я не есть класс CSS для этой категории. Какой лучший способ сделать это?

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

Answer 1

Простой ответ - использовать несколько классов для

, чтобы

<div class="header_div header_red">
    <!-- Content -->
</div>

<div class="header_div header_green">
    <!-- Content -->
</div>

Answer 2

Вы можете указать несколько стилей для класса div:

<div class="header_div mystyle">
    <!-- Content -->
</div>

Я считаю, что стили, объявленные позже в объявлении, переопределяют более ранние. Пока вы гарантируете, что ваши пользовательские стили «затеняют» стили header-div, вы всегда можете включить элемент header-div, и он будет действовать только тогда, когда какой-либо дополнительный стиль отсутствует (или пуст).

Answer 3

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

<div class="header_div category">
    <!-- Content -->
</div>

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

Answer 4

Если он будет использоваться повторно на странице, это должен быть класс.

Если он уникален на странице, используйте идентификатор.

Answer 5

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

Почему бы не назначить класс для привязки данных div на основе категории? Когда ваш ретранслятор становится связанным, найдите свой div для предмета, который вы связываете, и назначьте его.

Вы также можете заменить div для asp: Panel и использовать его метод onDataBinding. Это должно выглядеть точно так же, как ваш div.

Answer 6

Не зная больше о вашем контенте, вы не можете использовать один из тегов заголовка (<h1> и т. Д.)?

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