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

Question

我怎样才能将它重写到我没有重复 text-align: center; 几次的地方？

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

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

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

Answer 1

将所有 then 放入 class 并将 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>

Answer 2

此代码会对您有所帮助

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

Answer 3

实际上，由于文本对齐是 inherited property，您可以通过将样式应用于父元素来影响整个部分：

section.info { text-align: center; }

Answer 4

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

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

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

标准化

Answer 5

你可以直接使用

section.info {
    text-align: center;
}

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

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

How could I write this more succinctly?