підстановка * в CSS для занять

669

У мене є ці диви, з якими я стилю .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 І список сумісності

— 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

— Сотіріс
джерело

2

Класна інформація. Є лише застереження, якщо продуктивність не викликає труднощів, більшість ліній CSS буде відхиляти селектори атрибутів, що нагадують регулярний вираз (наприклад, використовуючи '*') b / c повільної продуктивності. За винятком використання препроцесора (наприклад, 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-'.

Щодо причини цього не робити, я бачу, де краще було б вибрати цей спосіб; що стосується стилю, я би цього не робив сам, але це можливо.

— томас.хан
джерело

Дякую вам за цей 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. Наприклад, застосувати стиль до всіх названих міток foo*, ви б це зробилиQLabel[objectName|='foo'] { ... }

— відновіть Моніку

Як сказав @BoltClock, це рішення ламається, якщо в елементі є кілька класів, і вони не починаються з класу ОП, який шукає.

— Дан Даскалеску

Не працює в Chrome 78, * і ^ не працюють.

— Гордон Мохрін

3

Якщо вам не потрібен унікальний ідентифікатор для подальшої стилістики дівок і ви використовуєте HTML5, ви можете спробувати користуватися спеціальними атрибутами даних. Прочитайте тут або спробуйте пошук у GoogleHTML5 Custom Data Attributes

— DKSan
джерело