html - CSS中的文本对齐继承

Question

我有一个包含 div 和一些 CSS 规则的 HTML 结构。我想知道为什么text-align:centre继承到它的子 div 而为什么只是text-align:centre继承

.multi {
  width: 500px;
  text-align: center;
  float: left
}

<div class="multi">
  <div class="rr">Abc</div>
</div>

Answer 1

在 CSS 中，默认情况下，某些属性是自然继承的。text-align是其中之一，还有font、color和其他。这是一个相当小（但大部分是健壮的）属性列表，这些属性将由子级继承，也不会由子级继承。

在这种情况下你必须做的是这样的：

<style>
.multi {
    width: 500px;
    text-align: center;
    float: left;
}
.multi .rr {
    text-align: left; /* Or whatever value multi's parent has */
}
</style>