Что такое 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

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

Ответ 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.