Что такое REGEX селектора CSS

Я хочу обработать файл CSS и добавить перед каждым селектором CSS другой селектор.

From:

p{margin:0 0 10px;}
.lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;}

Мне бы хотелось:

.mySelector p{margin:0 0 10px;}
.mySelector .lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;}

Но мой CSS файл действительно сложный (на самом деле это файл bootstrap css), поэтому регулярное выражение должно соответствовать всем селекторам CSS.

Теперь у меня есть это регулярное выражение:

([^\r\n,{};]+)(,|{)

и вы можете увидеть результат здесь http://regexr.com?328ps но, как вы видите, существует много совпадений, которые не должны совпадать с

например:

text-shadow:0 -1px 0 rgba(0,

соответствует положительному, но не должно

Есть ли у кого-то решение?

ТНХ

Ответ 1

Итак, наконец, я нашел способ лучше сделать это.

Я использую LESS-редактор (например: http://lesstester.com/)

и просто вложите весь мой файл css: .mySelector {ваш css здесь}

Ответ 2

Нет. Селекторы CSS не являются примером "" Обычный язык " и поэтому не могут быть проанализированы регулярным выражением. Вам нужно будет создать собственный синтаксический анализатор на основе спецификации грамматики CSS: http://www.w3.org/TR/css3-syntax/#detailed-grammar

CSS описывается как грамматика LL (1), поэтому вам, вероятно, лучше использовать такой инструмент, как Yacc, для генерации вашего парсера для вас.

Ответ 3

Итак, я наконец нашел REGEX, который работает для моих требований

([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)

Ключевым моментом было добавить Позитивный просмотр, чтобы избежать плохих совпадений

(?=[^}]*{)

Результат можно увидеть здесь: http://regexr.com?328s7

Единственная предосторожность, которую я могу порекомендовать, - удалить каждый комментарий блока:

неверный образец с комментарием блока: http://regexr.com?328sd

Ответ 4

Ниже приведено простое и читаемое регулярное выражение:

[\#\.\w\-\,\s\n\r\t:]+(?=\s*\{)

вы можете проверить его на код css в этом tool`

Ответ 5

Верно, что вы не можете выбрать css селектор с помощью регулярного выражения, но вы можете выбрать css rules с помощью regex, чтобы вы могли сделать работу в обратном порядке:

формат css файла, чтобы не иметь селекторов и правил в одной строке. ваш код должен выглядеть следующим образом:

р {
    margin: 0 0 10px;
}
.Lead {
    край дно: 20px;
    Размер шрифта: 21px;
    начертание шрифта: 200;
    высота строки: 30px;
}
выберите все правила (regex: (^ (.) *;)

р {
     margin: 0 0 10px;
}
.Lead {
     краю дна: 20px;
    Размер шрифта: 21px;
    начертание шрифта: 200;
    высота строки: 30px;
}
добавить префикс к правилам (пример ####)

р {
     #### margin: 0 0 10px;
}
.Lead {
     #### краю дна: 20px;
    #### размер шрифта: 21px;
    #### начертание шрифта: 200;
    #### высота строки: 30px;
}
выберите все строки, не начинающиеся С####, а не возврат к строке, а не a} (regex: ^ [^ ####\n}])

р {
        #### margin: 0 0 10px;
    }
    .Lead {
        #### край дно: 20px;
        #### размер шрифта: 21px;
        #### начертание шрифта: 200;
        #### высота строки: 30px;
     }
добавить префикс css

.my_class_prefix p {
        #### margin: 0 0 10px;
    }
    .my_class_prefix.lead {
        #### край дно: 20px;
        #### размер шрифта: 21px;
        #### начертание шрифта: 200;
        #### высота строки: 30px;
     }
удалить добавленный префикС####

.my_class_prefix p {
        margin: 0 0 10px;
    }
    .my_class_prefix.lead {
        край дно: 20px;
        Размер шрифта: 21px;
        начертание шрифта: 200;
        высота строки: 30px;
     }

Ответ 6

Здесь решение, которое я использовал для аналогичной задачи. Я хотел удалить все правила css, которые начинались с @. Для этого я использовал следующее регулярное выражение:

@\s*.*\s*\{((?!\n\})[\s\S])+\n\}

Это делает предположение, что правило заканчивается на новой строке. Таким образом, он может сортировать правила вложенных правил CSS.