Использование подстановочного знака * в CSS для классов

Question

Я столкнулся с проблемой стилизации нескольких div-ов с классом .tocolor. Мне нужно, чтобы каждый из этих div-ов имел уникальный идентификатор (например, 1, 2, 3, 4), поэтому я добавляю дополнительные классы в формате .tocolor-1, .tocolor-2 и так далее.

Вот пример кода:

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>
<div class="tocolor tocolor-4">tocolor 4</div>

Стили для класса .tocolor:

.tocolor {
  background: red;
}

Теперь вопрос: существует ли способ, чтобы использовать только один класс в формате .tocolor-* для всех этих идентификаторов? Я пытался использовать шаблон * в CSS, как показано ниже, но это не сработало:

.tocolor-* {
  background: red;
}

Подскажите, пожалуйста, как можно решить эту проблему.

Answer 1

Да, вы можете сделать это.

*[id^='term-'] {
    [css здесь]
}

Это выберет все элементы с id, начинающимся на 'term-'.

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

Answer 2

Альтернативное решение:

Селектор div[class|='tocolor'] будет соответствовать значениям атрибута "class", которые начинаются с "tocolor-", включая "tocolor-1", "tocolor-2" и так далее.

Учтите, что это не будет соответствовать следующему примеру:

<div class="foo tocolor-">

Ссылка на источник: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Представляет элемент с атрибутом att, значение которого либо точно равно "val", либо начинается с "val", за которым сразу следует "-" (U+002D)

Использование подстановочного знака * в CSS для классов

2 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных