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

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

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

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

//css
#s1{
...
}

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

Ответы

Ответ 1

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

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

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

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

W3 CSS selector docs здесь.

Ответ 2

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

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

[class*="col"]

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

[class^="col-"]

.left-col в конце: .left-col, .right-col и т.д.

[class$="-col"]

Ответ 3

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

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

и

.sec {
    ...
}

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

#sections > div {
    ...
}

Ответ 4

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

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

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

#main > div

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

#main div

Найдите первый div, который является прямым потомком #sections.

#main > div:first-child

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

#main > div[foo="bar"]

Ответ 5

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

HTML:

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

CSS

//css
.myclass
{
   ...
}

Ответ 6

Попробуйте мое общее 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

Ответ 7

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

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

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