1

Есть более 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. Как правильно будет выглядеть код?

4 ответа 4

4

Можно, если класс к каждой картинке добавлять не получается, но классы или 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;}
1
  • @ИнквизиторЯ подкорректировал вопрос, а то что-то не те ответы, что нужно.
    – Budun
    25 янв 2019 в 15:52
1

Если:

1) классы по определению разные И

2) селектор вида *[class^="post-"] {...} применять нельзя (например, у вас помимо нужных элементов присутствуют такие, которые трогать нельзя) И

3) x-путь для этих элементов тоже разный (т.е., задать стиль для них и только для них путем указания чего-то наподобие body .content .topic > .post-container > .post-header + div + div > div:first-child нельзя),

тогда все, что вы можете сделать, это оптимизировать конструкции для каждого поста отдельно путем объединения записи свойств background-image и background-repeat в общее свойство background. Короче будет.

0

добавить класс типа bg-repeat

где

.bg-repeat {background-repeat:repeat;}
0
.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;}

1
  • @KeeplodВерно это классы (в реальности это публикации-посты) -> .post-12378 .post-25371 .post-64403 {background-repeat:repeat;} . А как с картинками? Имена-то разные у картинок.
    – Budun
    25 янв 2019 в 15:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.