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

Question

У меня есть эти div, с которыми я работаю .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;
}

Answer 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

Answer 2

Да, вы можете это.

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

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

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

Answer 3

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

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

Помните, что это не будет совпадать с `

Справка: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

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

Answer 4

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