Как писать регулярные выражения в CSS - PullRequest
Новая
       1

Как писать регулярные выражения в CSS

0 голосов
/ 10 июля 2011

Как использовать регулярные выражения в CSS?Я нашел учебник здесь для сопоставления статических строк в CSS, но я не смог найти учебник по использованию регулярных выражений для сопоставления нескольких строк в CSS.(Я нашел один здесь , но не смог заставить его работать. Я также посмотрел документацию W3C по использованию регулярных выражений , но я не смог разобраться в этом документе.)

Я хочу сопоставить серию <DIV> тегов, чьи идентификаторы начинаются с s1 и увеличиваются на единицу (т. Е. #s1 #s2 #s3 ...).

IЗнайте, что div[id^=s], div[id^='s'] и div[id^='s'] каждый выполняет сопоставление, как я намереваюсь в моем CSS.Тем не менее, каждый из них также соответствует идентификатору #section, что я не хочу, чтобы это произошло.Я считаю, что "/^s([0-9])+$/" является эквивалентной строкой PHP - я просто ищу ее в CSS-версии.

Ответы [ 5 ]

3 голосов
/ 10 июля 2011

Нет способа сопоставить элементы с регулярным выражением, даже в CSS3 .Лучше всего, вероятно, просто использовать класс для ваших div s. 

<style>
.s-div {
    // stuff specific to each div
}
</style>

<div id="s1" class="s-div"><!-- stuff --></div>
<div id="s2" class="s-div"><!-- stuff --></div>
<div id="s3" class="s-div"><!-- stuff --></div>
<div id="s4" class="s-div"><!-- stuff --></div>
<div id="s5" class="s-div"><!-- stuff --></div>

Также помните, что вы можете разделить несколько имен классов пробелом внутри атрибута class. 

<div class="class1 class2 class3"></div>
1 голос
/ 26 августа 2012 
javascript:
    /* page scrape the DIV s# id's and generate the style selector */
    re=/<div\b[^>]*\b(id=(('|")?)s[0-9]+\2)(\b[^>]*)?>/ig;
    alert(
        document . body . innerHTML .
            match(re) . join("") .
                replace(re,"div[$1], ") + "{ styling details here }" );

    alert(
       ("test with <div id=s2 aadf><DIV ID=123> <DIV adf=asf as><Div id='s45'>" +
              "<div id=s2a ><DIV ID=s23 > <DIV asdf=as id=S9 ><Div id='x45' >") .
            match(re) . join("") .
                replace(re,"div[$1], ") + "{ styling details here }"
        );

Тест дает 

div[id=s2], div[id='s45'], div[ID=s23], div[id=S9], { styling details here }

Обратите внимание на свисающий , и сохраненный случай S9.

0 голосов
/ 26 августа 2012 
<style>
/* eliminate the alphabet except s - NB some funny characters may be left */
/* HTML id's are case-sensitive - upper case may need exclusion & inclusion */
div[id*=a], div[id*=b], div[id*=c], ..., div[id*=q], div[id*=r] {}
div[id*=t], div[id*=u], div[id*=v], div[id*=w], div[id*=x], div[id*=y], div[id*=z] {}
div[id*='_'], div[id*='-'], div[id*='%'], div[id*='#'] {}

/* s can not be embedded */
div[id*=0s], div[id*=1s], div[id*=2s], ..., div[id*=9s] {}

/* s will be followed by a string of numerals - maybe a funny char or two */
div[id^=s0], div[id^=s1], div[id^=s2], ... div[id^=s9] { ... }
</style>
0 голосов
/ 26 августа 2012

Следующий CSS выберет #s0, #s1, ... , #s9, а не #section, хотя браузер должен реализовать отрицание CCS3 :not().
Окончательный выбор эквивалентен: 

/^s[0-9]?.*[0-9]$/

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

s6, s42, s123, s5xgh7, ...

В строке :not() исключаются те идентификаторы, которые не запускаются должным образом с использованием пустого стиля {}.

<style>
div:not([id^=s0]):not([id^=s1]):not([id^=s2]):not ... :not([id^=s9]) {}
div[id^=s][id$=0], div[id^=s][id$=1], div[id^=s][id$=2], ... div[id^=s][id$=9] { ... }
</style>

CSS3 не использует регулярные выражения для определения селекторов, НО ...
Модуль условных правил CSS уровня 3
определяет очень специфическую функцию, regexp(<string>), который анализирует URL-адрес с регулярным выражением при создании правила @document.

0 голосов
/ 10 июля 2011

Если вы не хотите или не можете использовать решение, опубликованное @zneak, вы можете сделать это, отредактировав метки с помощью javascript, но я советую вам: это адская работа.

...