html - 为什么我的类(class)被覆盖了？

Question

我正在尝试使用 Bootstrap “text-center”类使文本居中对齐。我已将该类应用于相关元素，但未正确呈现它。

我的元素定义如下:

<div class="content-panel inline-panel text-center">
    Some text
</div>

"inline-panel"除了应用 display: inline-block;

什么都不做

据我所知，因为“text-center”是最后应用的，所有样式都是通过类名应用的(所以没有特异性问题)，“text-center”类中包含的所有样式都应该覆盖之前的任何样式造型。

在这种情况下，“content-panel”类包含 text-align: left; 但“text-center”类不会覆盖它。

我检查只是为了确定，但我没有在任何地方使用 !important 声明。

我错过了什么吗？

Answer 1

如果它只是它自己的类，它会在 CSS 文件中乱序。

例如这个文本中心在前的将不会应用它:

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

.content-panel {
text-align: left;
}

<div class="content-panel inline-panel text-center">
    Some text
</div>

而这个会，因为它在 CSS 顺序中排在最后:

.content-panel {
text-align: left;
}

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

<div class="content-panel inline-panel text-center">
    Some text
</div>

你可以尝试的一件事是增加 CSS 的特异性，所以 .text-center 会变成类似 .content-panel.text-center 的东西，那应该覆盖左对齐。