html - 几乎相同的嵌套选择器的 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;
  }
}

我的意思是:在 .centertext 元素内的 .wpb_wrapper 元素内找到的每个 heading1、heading2、heading3 和段落居中。

我确定我必须在“.centertext .wpb_wrapper”和所有这些人之间放置一个符号或一些简单的东西(或者空格字符也应该消失？)，但我不知道它是什么.请帮忙!

提前致谢。 J

Answer 1

您可以使用以下代码来缩短您的代码

@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;
  }
}