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

670

У меня есть эти 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;
}
css css-selectors wildcard щебет
источник
1
Вот официальный сайт CSS3 о селекторах: w3.org/TR/css3-selectors И список совместимости: findmebyip.com/litmus
GarfieldKlon

Ответы:

1216

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

Sotiris
источник
2
Классная информация. Единственное предостережение - если производительность является проблемой, большинство CSS-линтеров будут отклонять селекторы атрибутов, которые напоминают регулярное выражение (например, с использованием «*»), из-за низкой производительности. За исключением использования препроцессора (например, Sass), есть ли другой возможный способ сделать это?
CodeFinity
2
Есть ли способ проверить, содержит ли атрибут класса несколько подстрок? Может быть что-то подобное div[class*="foo"][class="bar"]?
Коннор
Это пространство в нашем примере «содержит» довольно убийственно. Из того, что я вижу, этого не должно быть, верно?
Томас
1
@Thomas Это необходимо для обеспечения class="foo tocolor-red"совпадений, но не для этогоclass="foo fromtocolor-red-blue"
aleclarson
Спасибо за это. Я использую эту технику в течение нескольких лет, но никогда не понимал, что класс ^ = применяется только к началу записи класса HTML. Я думал, что это применимо ко всем именам классов, определенных для тега HTML.
BevansDesign
108

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

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

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

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

thomas.han
источник
Спасибо за это IDоснованное приложение, а не только за class.
Хом Назид
26

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

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)

adroitec
источник
12
Это не будет работать, если classатрибут начинается с другого класса, который не начинается с tocolor.
BoltClock
1
Это также прекрасно работает в виджетах Qt styleSheets. Например, чтобы применить стиль ко всем именованным меткам foo*, вы должны это сделатьQLabel[objectName|='foo'] { ... }
восстановить Monica
Как сказал @BoltClock, это решение ломается, если элемент имеет несколько классов, и они не начинаются с класса, который ищет OP.
Дан Даскалеску
Не работает в Chrome 78, * и ^ хотя работают.
Гордон Мохрин
3

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

DKSan
источник