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

Question

У меня есть html-страница с элементами div, имеющими id (s) вида s1 , s2 и так далее.

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

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

//css
#s1{
...
}

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

Answer 1

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

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

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

См. скрипка здесь .

W3 CSS селектор документы здесь .

Answer 2

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

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

и

.sec {
    ...
}

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

#sections > div {
    ...
}

Answer 3

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

Совпадения в любом месте: .col-md, .left-col, .col, .tricolor и т. Д.

[class*="col"]

Совпадения в начале: .col-md, .col-sm-6 и т. Д.

[class^="col-"]

Совпадения в финале: .left-col, .right-col и т. Д.

[class$="-col"]

Answer 4

Прежде всего, существует множество способов сопоставления элементов в HTML-документе. Соответствие по идентификатору следует использовать с осторожностью.

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

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

Большинство этих селекторов будут работать с IE 9 и всеми другими современными браузерами; важные селекторы работают в IE 8 (результаты будут варьироваться в IE 7 и ниже).

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

Соответствует всем DIV с, которые являются прямыми потомками #sections.

#sections > DIV

Соответствует всем DIV с, которые являются прямыми или косвенными потомками #sections.

#sections DIV

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

#sections > DIV:first-child

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

#sections > DIV[foo="bar"]

Answer 5

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

HTML:

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

CSS:

//css
.myclass
{
   ...
}

Answer 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

Answer 7

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

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

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