CSS text-align规则冲突：如何让.footer的居中样式覆盖p元素？

问题场景 #

当前全局p元素设置了text-align: justify实现两端对齐，但给.footer类设置text-align: center后，其内部的p元素仍保持两端对齐，需要实现：

• 全局p元素维持两端对齐
• .footer内的p元素应用居中对齐

原代码示例 #

HTML代码

Hello World

<div class="footer">
  <p>This is a test</p>
</div>

CSS代码

p {
  text-align: justify;
}

.footer {
    background-color: #433E3F;
    color: #bdcad9;
    text-align: center;
}

解决方案 #

问题核心是元素自身样式优先级高于继承样式：.footer的text-align: center是通过继承传递给p元素的，但p元素自身有全局的text-align: justify样式，优先级更高，所以继承的居中样式被覆盖。

只需要直接选中.footer内部的p元素，设置居中样式即可，这个选择器的优先级高于全局p元素的选择器，会自动覆盖原有样式：

修改后的CSS代码

p {
  text-align: justify;
}

.footer {
    background-color: #433E3F;
    color: #bdcad9;
}

.footer p {
    text-align: center;
}

原理说明 #

CSS选择器优先级规则：

• 元素选择器（如p）优先级为1
• 类选择器+元素选择器（如.footer p）优先级为10+1=11

更高优先级的选择器定义的样式会覆盖低优先级的，因此.footer p的text-align: center会取代全局p元素的text-align: justify，同时不影响其他p元素的两端对齐效果。

内容的提问来源于stack exchange，提问作者FluidMechanics Potential Flows