У меня есть 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.
Вы можете управлять этими элементами без какой-либо формы регулярного выражения, как показывают предыдущие ответы, но для прямого ответа на вопрос, да, вы можете использовать форму регулярного выражения в селекторах:
#sections div[id^='s'] {
color: red;
}
Это говорит о выборе любых элементов div внутри #sections div, у которых есть идентификатор, начинающийся с буквы '.'.
Смотрите скрипку здесь.
В качестве дополнения к этому ответу вы можете использовать $ чтобы получить конечные совпадения, и * чтобы получить совпадения в любом месте имени значения.
.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"]
Идентификатор предназначен для однозначного определения элемента. Любые стили, применяемые к нему, также должны быть уникальными для этого элемента. Если у вас есть стили, которые вы хотите применить ко многим элементам, вы должны добавить к ним класс, а не полагаться на идентификаторы...
<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/
Совпадение со всеми div, которые являются прямыми потомками #main.
#main > div
Сопоставьте все div, которые являются прямыми или косвенными потомками #main.
#main div
Найдите первый div, который является прямым потомком #sections.
#main > div:first-child
Сопоставьте div с определенным атрибутом.
#main > div[foo="bar"]
Вы можете просто добавить класс к каждому из ваших DIV и применить правило к классу следующим образом:
HTML:
<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>
CSS
//css
.myclass
{
...
}
Попробуйте мое общее 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}(?=.*-))
существует еще один простой способ выбора определенных элементов в css тоже...
#s1, #s2, #s3 {
// set css attributes here
}
если у вас есть только несколько элементов на выбор, и вы не хотите беспокоиться о классах, это тоже будет легко работать.