Как сопоставить идентификационный номер с регулярным выражением CSS
Я настраиваю тему WordPress и застрял со следующей проблемой CSS. У меня есть список элементов следующим образом:
li.block1, li.block2, li.block3, li.block4 { top: 0; }
li.block5, li.block6, li.block7, li.block8 { top: 150px; }
li.block9, li.block10, li.block11, li.block12 { top: 300px; }
Я генерирую код с использованием PHP и хочу использовать регулярные выражения для стилизации этих элементов. Я хотел бы добиться следующего:
- li.block[1-4] {style 1}
- li.block[5-9] {style 2}
- li.block[10-14] {style 3}
- and so on...
Как я создаю li.block[number] Динамически основанный на пользовательском вводе, который может содержать несколько сотен элементов, я считаю, что использование регулярных выражений — правильный путь.
Я пробовал следующее:
- Пробовал использовать $, чтобы соответствовать последнему элементу, но я хотел бы получить некоторую помощь о том, как сопоставить диапазон значений
- Пробовал использовать соответствие атрибута last-child, но так как он динамический, я не могу заранее исправить last-child
- Пытался использовать диапазон, чтобы соответствовать диапазону, но я не мог понять, как проверить, находится ли число в диапазоне
- и несколько других критериев соответствия DOM с использованием CSS
Я думаю, что условие соответствия CSS, которое я использую, является ошибочным, поэтому я хотел бы попросить экспертов на этом форуме показать мне, как правильно использовать $ и диапазон:
Как я могу использовать регулярное выражение на основе: li.block[number,i, in range a-b] {Apply style number, i}?
Я также открыт для других идей, которые помогают мне поддерживать динамичность темы.
Заранее спасибо,
Митхун Шридхаран
Решение
CSS не знает регулярных выражений, но вы можете использовать ~:
li {top: 0;}
li.block4 ~ li {top: 150px;}
li.block8 ~ li {top: 300px;}
Другие решения
Другой способ цепочки :nth-child псевдоклассы, например
Пример: https://jsfiddle.net/pg0c3qq3/2/
li:nth-child(-n + 4) { top: 0 }
li:nth-child(n+5):nth-child(-n + 8) { top: 150px; }
li:nth-child(n+9):nth-child(-n + 12) { top: 300px; }
По сравнению с общим решением одного брата, каждое правило теперь просто определяет стиль только к ожидаемому диапазону li Таким образом, с помощью этого метода каждое правило фактически не отменяет стиль, примененный в предыдущих правилах.
Также это не требует применения определенного class к каждому элементу списка, чтобы разметка могла быть упрощена.