我怎样才能更简洁地写这个？答案

【问题标题】：How could I write this more succinctly?我怎样才能更简洁地写这个？
【发布时间】：2016-05-30 16:39:24
【问题描述】：

我怎么能把这个重写到我不重复text-align: center; 多次的地方？

section.info h2 {
    text-align: center;
}

section.info h5 {
    text-align: center;
}

section.info p {
    text-align: center;
}

【问题讨论】：

【解决方案1】：

实际上，由于 text-align 是 inherited property，因此您可以通过将样式应用于父元素来影响整个部分：

section.info { text-align: center; }

【讨论】：

【解决方案2】：

虽然不是所有浏览器都支持：

section.info :-webkit-any(h2, h5, p) { }

其他浏览器在其他前缀下支持此功能，例如-moz-any。此功能很可能会以 :matches 的名称标准化。

【讨论】：

【解决方案3】：

这段代码会帮助你

section.info h2, section.info h5, section.info p {
  text-align: center;
}

【讨论】：

【解决方案4】：

你可以使用

section.info {
    text-align: center;
}

它会自动影响所有的子元素。如果由于某种原因您需要具体说明，您可以这样做：

section.info h2, section.info h5, section.info p {
  text-align: center;
}

【讨论】：

【解决方案5】：

将所有这些都放在一个类中并将css属性写为.class_name{ /* css_property */ }，而不是分别为每个标签指定属性。在您的情况下，您可以使用 section.info 代替 class_name。

例如：

.center-text {
  text-align: center;
}

<div class="center-text">Data</div>
<p class="center-text">Data</p>
<h1 class="center-text">Data</h1>

【讨论】：

如果你要定义这样一个类，为什么不给它一个更好的名字，比如center-text？
@torazaburo 有意义的类名是的:)。
因为这与早期写成<div align="center">、<p align="center">、<h1 align="center">（或类似的）相同。它只是破坏了标记和样式的分离，并增加了很多不可维护性。与使用 Bootstrap 类相同（xs-column-4 等）。
@Jost 首先，<div> align is deprecated。其次，这里没有“不可维护性”。
@AniMenon 好的，然后取一个以 1k 为中心的页面 h1s，并将它们更改为左对齐。这相当于直接使用 align ，这个错误的原因与align被弃用的原因相同。