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

у меня есть эти дивы, которые я стайлинг с .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;
}

4 ответов


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

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

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

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

демо: http://jsfiddle.net/K3693/1/

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


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

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

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

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


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

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)


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