Использование регулярного выражения в CSS?

У меня есть html-страница с div, у которых есть id (s) формы s1 , s2 и так далее.

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

Я хочу применить свойство css к подмножеству этих разделов / div (в зависимости от идентификатора). Однако каждый раз, когда я добавляю div , мне приходится добавлять CSS для раздела отдельно, вот так.

//css
#s1{
...
}

Есть ли что-то вроде регулярных выражений в css, которые я могу использовать для применения стиля к набору div .

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

#sections div[id^='s'] {
    color: red;  
}

Это говорит о том, что выберите любые элементы div внутри div #sections, идентификаторы которых начинаются с буквы 's'.

Смотрите скрипку здесь .

Документация по селектору CSS W3 здесь .

В качестве дополнения к этому ответу вы можете использовать $для получения конечных совпадений и *для получения совпадений в любом месте имени значения.

Матчи в любом месте: .col-md, .left-col, .col, .tricolorи т.д.

[class*="col"]

Матчи в начале: .col-md, .col-sm-6и т.д.

[class^="col-"]

Матчи в финале: .left-col, .right-colи т.д.

[class$="-col"]

Идентификатор предназначен для уникальной идентификации элемента . Любые стили, применяемые к нему, также должны быть уникальными для этого элемента. Если у вас есть стили, которые вы хотите применить ко многим элементам, вы должны добавить класс для них всех, а не полагаться на селекторы идентификаторов ...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

и

.sec {
    ...
}

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

#sections > div {
    ...
}

Прежде всего, существует множество способов сопоставления элементов в документе HTML. Начните с этой ссылки, чтобы увидеть некоторые из доступных селекторов / шаблонов, которые вы можете использовать для применения правила стиля к элементу (ам).

http://www.w3.org/TR/selectors/

Сопоставьте все divs, являющиеся прямыми потомками #main.

#main > div

Сопоставьте все divs, которые являются прямыми или косвенными потомками #main.

#main div

Соответствует первому, divкоторый является прямым потомком #sections.

#main > div:first-child

Сопоставьте a divс определенным атрибутом.

#main > div[foo="bar"]

Вы можете просто добавить класс к каждому из ваших DIV и применить правило к этому классу следующим образом:

HTML:

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS:

//css
.myclass
{
   ...
}

Я обычно использую, *когда хочу получить все строки, содержащие нужные символы.

* используется в регулярном выражении, заменяет все символы.

Используется в SASS или CSS, что-то вроде того, [id*="s"]и он получит все элементы DOM с идентификатором "s ......".

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

Попробуйте мое обычное регулярное выражение CSS

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

Демо https://regexr.com/4a22i

есть еще один простой способ выбрать определенные элементы в css ...

#s1, #s2, #s3 {
    // set css attributes here
}

если у вас есть только несколько элементов на выбор и вы не хотите возиться с классами, это тоже сработает.