подстановочный знак * в 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
источник