我怎么能更简洁地写这个？

Question

我怎样才能将其重新写入我不会多次重复text-align: center;的地方？

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

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

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

Answer 1

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

section.info { text-align: center; }

Answer 2

此代码可以帮助您

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

Answer 3

虽然并非所有浏览器都支持它：

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

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

的名称标准化

Answer 4

你可以使用

section.info {
    text-align: center;
}

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

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

Answer 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>