Как совместить css с селекторами

Question

Мне нужно почистить мой файл CSS и удалить немного наворотов. Я знаю, что можно комбинировать классы и идентификаторы, разделяя их запятыми. Однако я не уверен, как go объединить их, когда они имеют более сложные селекторы, подобные приведенным ниже.

Любая помощь будет оценена. Спасибо.

body #gform_wrapper_14 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}
body #gform_wrapper_15 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}
body #gform_wrapper_17 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

или

@media only screen and (min-width: 641px) {
    body #gform_wrapper_14 { 
      max-width: 80%;
      margin: 0 auto;
     }
    body #gform_wrapper_15 { 
      max-width: 80%;
      margin: 0 auto;
     }
    body #gform_wrapper_17 { 
      max-width: 80%;
      margin: 0 auto;
     }
    .hor-address {
        width:500px;
    }
}

Уточнение : у меня есть несколько объектов #gform_wrapper_xx (сгенерированных сторонним плагином Wordpress), но я этого не делаю хочу изменить их все. Я просто хочу изменить эти 3.

Answer 1

Чтобы не генерировать одно и то же css bloat do:

body .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

Answer 2

Вы можете очистить свой код с помощью современного sass (s css). Код будет:

body{
   #gform_wrapper_14{
      .gform_footer{
         input[type=submit] {
            border-radius:0px;
            background:#e89d53;
         }
      }
   }
   #gform_wrapper_15{
      @extend #gform_wrapper_14;
   }
   #gform_wrapper_17{
      @extend #gform_wrapper_14;
   }
}

Answer 3

Поскольку все ваши целевые элементы имеют префикс. Вы можете использовать селектор атрибута, чтобы сократить избыточность. Используя что-то подобное [id^="gform_wrapper_"], вы по существу нацеливаете все элементы с идентификатором, который начинается с gform_wrapper_

. Подробнее о селекторах атрибутов можно прочитать здесь

[id^="gform_wrapper_"] input[type=submit] {
  border-radius: 0px;
  background: #e89d53;
}

<div id="gform_wrapper_14">
  <div class=".gform_footer">
    <input type="submit">
  </div>
</div>
<div id="gform_wrapper_15">
  <div class=".gform_footer">
    <input type="submit">
  </div>
</div>
<div id="gform_wrapper_16">
  <div class=".gform_footer">
    <input type="submit">
  </div>
</div>

Answer 4

Как это просто:

body #gform_wrapper_14 .gform_footer input[type=submit],
body #gform_wrapper_15 .gform_footer input[type=submit],
body #gform_wrapper_17 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

и что:

@media only screen and (min-width: 641px) {
    body #gform_wrapper_14,
    body #gform_wrapper_15,
    body #gform_wrapper_17 { 
      max-width: 80%;
      margin: 0 auto;
     }

    .hor-address {
        width:500px;
    }
}