Правила CSS для почти идентичных вложенных селекторов

Question

Я пытаюсь написать более простые адаптивные правила CSS для веб-сайта, мне нужно иметь следующее с менее повторяющимся текстом:

@media only screen and (max-width: 767px) {
  .centertext .wpb_wrapper h1 {
     text-align:center !important;
  }
  .centertext .wpb_wrapper h2 {
     text-align:center !important;
  }
  .centertext .wpb_wrapper h3 {
     text-align:center !important;
  }
  .centertext .wpb_wrapper p {
     text-align:center !important;
  }
}

Что я имею в виду: центрируйте каждый заголовок1, заголовок2, заголовок3 и абзац, которые находятся внутри элемента .wpb_wrapper, который находится внутри элемента .centertext.

Я уверен, что есть какой-то символ или что-то простое, что я должен поставить между ".centertext .wpb_wrapper" и всеми этими парнями (или, возможно, пробел тоже должен исчезнуть?), Но я не знаю, что это такое , Пожалуйста, помогите!

Спасибо заранее. J

Answer 1

Почему бы просто:

@media only screen and (max-width: 767px) {
  .centertext {text-align:center;}
}

Если у вас нет других правил в вашем h1 / h2 / h3 и т. Д., Переопределяющих это, оно будет унаследовано.Если у вас есть другие правила, противоречащие друг другу, вы, вероятно, можете упростить изменение порядка CSS или убедиться, что конфликты имеют аналогичные ограничения медиазапросов.

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

Answer 2

Вы можете использовать следующее для сокращения вашего кода

@media only screen and (max-width: 767px) {
  .centertext .wpb_wrapper h1,
  .centertext .wpb_wrapper h2,
  .centertext .wpb_wrapper h3,
  .centertext .wpb_wrapper p{
    text-align:center !important;
  }
}

Если вы хотите применить его ко всем элементам, которые вы можете использовать

@media only screen and (max-width: 767px) {
  .centertext .wpb_wrapper > * {
    text-align:center !important;
  }
}

Answer 3

Вы могли бы немного уменьшить повторение на , разделяя запятую селекторов и объявляя правила один раз:

.centertext .wpb_wrapper h1,
.centertext .wpb_wrapper h2,
.centertext .wpb_wrapper h3,
.centertext .wpb_wrapper p {
  text-align: center !important;
}

Но почему не только это?

.centertext {
  text-align: center;
}

Почему класс называется centertext, если он не всегда центральный текст?