Подстановочный знак * в CSS для классов

У меня есть эти divs, которые я разрабатываю с помощью .tocolor, но мне также нужен уникальный идентификатор 1,2,3,4 и т.д., поэтому я добавляю его как еще один класс tocolor-1.

<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{
  background: red;
}

Есть ли способ иметь только 1 класс tocolor-*. Я попытался использовать подстановочный знак *, как в этом css, но это не сработало.

.tocolor-*{
  background: red;
}

Ответы

Ответ 1

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

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

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

[class^="tocolor-"] - начинается с "tocolor-".
[class*=" tocolor-"] - содержит подстроку "tocolor-", встречающуюся непосредственно после пробела.

Демонстрация: http://jsfiddle.net/K3693/1/

Дополнительную информацию о селекторах атрибутов CSS вы можете найти здесь и здесь. И из MDN Docs MDN Docs

Ответ 2

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

*[id^='term-']{
    [css here]
}

Здесь будут выбраны все идентификаторы, начинающиеся с 'term-'.

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

Ответ 3

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

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)

Ответ 4

Если вам не нужен уникальный идентификатор для дальнейшего стилизации div и используйте HTML5, вы можете попробовать и настроить пользовательские атрибуты данных. Читайте на здесь или попробуйте найти в Google HTML5 Custom Data Attributes