为何HTML子元素无法继承设置为auto的dir属性？

你观察到的现象是正常的，核心原因在于：dir="auto"并不是一个可继承的方向属性值，它是让元素根据自身内容自动计算出实际的方向（ltr或rtl），子元素继承的是这个计算后的最终方向，而非auto这个属性值本身。

具体解释： #

• 当你给父元素设置dir="ltr"或dir="rtl"时，这是明确指定了方向属性值，子元素会直接继承这个明确的属性值，所以所有子元素的方向都和父元素一致。
• 但dir="auto"的逻辑是：元素会扫描自身内容中第一个具有强方向性的字符（比如拉丁字母属于LTR，阿拉伯字母、腓尼基字母属于RTL），以此确定自己的实际方向（最终是ltr或rtl）。子元素继承的是这个计算出来的实际方向，而不是auto这个“计算规则”。

在你的例子里，设置了dir="auto"的父div，其内容的第一个有效字符是英文（LTR方向），所以父div计算出的实际方向是ltr，所有子p元素自然继承的是ltr，而不是auto。如果把父div里的内容换成以RTL字符开头（比如把第一个p标签的内容换成腓尼基文字），父div会计算出rtl，子元素就会继承rtl方向了。

对应规范的正确理解： #

你引用的规范里说“元素的方向与父元素的方向相同”，这里的“方向”指的是计算后的实际方向（ltr/rtl），而不是父元素的dir属性值。dir="auto"只是父元素用来计算自身方向的规则，这个规则不会被继承，继承的是规则执行后的结果。

验证代码（修改后可看到差异） #

div {
  border: 1px red solid;
  margin: 1rem 0;
}
p {
  margin: 5px;
  border: 1px blue solid;
}

<!-- LTR -->
<div dir="ltr" id="div-ltr">
  <p>
    这个div设置了`ltr`，所以所有子元素也都是`ltr`，不受字符方向性影响
  </p>
  <p id="english-ltr">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, placeat
  </p>
  <p id="phoenician-ltr">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>
<!-- RTL -->
<div dir="rtl" id="div-rtl">
  <p>
    这个div设置了`rtl`，所以所有子元素也都是`rtl`，不受字符方向性影响
  </p>
  <p id="english-rtl">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, placeat
  </p>
  <p id="phoenician-rtl">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>
<!-- AUTO（修改父元素内容以验证RTL继承） -->
<div dir="auto" id="div-auto">
  <p>𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀 这个div设置了`auto`，现在父元素内容以RTL字符开头，子元素会继承`rtl`</p>
  <p id="english-auto">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, placeat
  </p>
  <p id="phoenician-auto">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>

内容的提问来源于stack exchange，提问作者Charles Loder