it-swarm.com.ru

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

У меня есть эти 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;
}
607
twitter

То, что вам нужно, называется селектором атрибутов. Пример использования вашей 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

1126
Sotiris

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

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

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

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

99
thomas.han

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

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)

25
adroitec

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

3
DKSan