Есть более 2000 тыс. строк такого кода:
body .post-12378{background-image: url("site.ru/images/gdijkn.gif")!important; background-repeat:repeat;}
body .post-25371{background-image: url("site.ru/images/xcerui.gif")!important; background-repeat:repeat;}
body .post-64403{background-image: url("site.ru/images/nmcdfw.gif")!important; background-repeat:repeat;}
Хочу оптимизировать CSS и применить background-repeat:repeat; один раз, чтобы не повторять к каждому коду. Хочу заметить, что ".post-" это публикация-пост и мне приходится в ручную в CSS файле, для нужных мне публикаций прописывать background. Как правильно будет выглядеть код?
Если:
1) классы по определению разные И
2) селектор вида *[class^="post-"] {...}
применять нельзя (например, у вас помимо нужных элементов присутствуют такие, которые трогать нельзя) И
3) x-путь для этих элементов тоже разный (т.е., задать стиль для них и только для них путем указания чего-то наподобие body .content .topic > .post-container > .post-header + div + div > div:first-child
нельзя),
тогда все, что вы можете сделать, это оптимизировать конструкции для каждого поста отдельно путем объединения записи свойств background-image
и background-repeat
в общее свойство background
. Короче будет.
Можно, если класс к каждой картинке добавлять не получается, но классы или ID имеют общий префикс, использовать селектор атрибутов:
body *[class^="post-"] {background-repeat:repeat;}
body *[ID^="post-"] {background-repeat:repeat;}
данная запись означает применить стиль всем элементам, чей класс|ID НАЧИНАЕТСЯ c "post-"
.
Для специфичности (мало ли, у вас не только нужные блоки имеют класс с таким же префиксом) можно указать более специфичным селектором, типа
body .post-content div[class^="post-"] {background-repeat:repeat;}
добавить класс типа bg-repeat
где
.bg-repeat {background-repeat:repeat;}
.post-12378 .post-25371 .post-64403 {background-repeat:repeat;}
Ты говоришь что ID разные, ID указывается через "#" Пример: #post-64403
Через "." как у тебя указывается class Пример: .post-64403
Правильнее будет трем картинкам дать один класс например .post-777
<img class="post-777" src="картинка 1">
<img class="post-777" src="картинка 2">
<img class="post-777" src="картинка 3">
и код в css будет
.post-777 {background-repeat:repeat;}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как сделать такой элемент статичнымНо в будущем, чтобы через стили я мог менять длину у синей полоски
Есть простой слайдер, при нажатии на кнопку next включается следующая картинкаМожно ли как-то сделать задержку между кликами чтоб новая картинка...