html - CSS中text-align的继承

Question

我想将所有“p”标签设置为“justify”，仅将标题部分设置为“center”。这里要注意的另一件事是，我选择了带有类型选择器（特异性：1）的段落和带有 id 选择器（特异性：100）的标题。

此外，#header 选择出现在 p 选择之后。如果 text-align 属性是可继承的，我猜想对于标题中的“p”标签，“center”样式应该比“justify”更重要。但它不是那样工作的。

我什至在 stackoverflow 上查看了类似的问题，并使用了 text-align: initial over #header p。那也没有用。

p {
  text-align: justify;
}

#header {
  text-align: center;
}

<div id="header">
  <h1>Article Name</h1>
  <p>Author Name</p>
</div>
<p>
  ... more paragraphs
</p>

Answer 1

#header, #header >p {
  text-align: center !important;
}

p {
  text-align: justify;
}

<div id="header">
  <h1>Article Name</h1>
  <p>Author Name</p>
</div>
<p>
  ... more paragraphs
</p>

Answer 2

您可以创建可以重用的类：

.justify{
    text-align: justify;
}

.center{
    text-align: center;
}

<div class="center">
  <h1>Article Name</h1>
  <p class="center">Author Name</p>
</div>
<p class="justify">
  ... more paragraphs
</p>