纯CSS实现同组段落文本方向统一的方案咨询（无HTML修改权限）

嘿，这个场景我之前也碰到过，没法改HTML的情况下要统一同组段落的文本方向，确实得挖挖CSS的灵活用法才行，咱们直接说可行的方案：

你描述的结构很清晰：每组以带dir属性的.group段落开头，后面跟着任意数量无dir的同类段落，不同组之间被非.group段落隔开。核心要解决的就是把组内第一个段落的文本方向，传递给后续所有同组的段落，同时不能串组影响其他组。

下面是可以直接用的CSS代码：

/* 遇到新组时重置方向变量，避免上组样式串过来 */
:not(p.group) + p.group {
  --group-dir: initial;
}

/* 定位组内第一个带dir的段落，设置方向变量并应用文本方向 */
p.group[dir="ltr"] {
  --group-dir: ltr;
  direction: ltr;
  unicode-bidi: embed;
}

p.group[dir="rtl"] {
  --group-dir: rtl;
  direction: rtl;
  unicode-bidi: embed;
}

/* 让组内后续的连续.group段落继承前一个的方向变量 */
p.group + p.group {
  --group-dir: var(--group-dir, initial);
  direction: var(--group-dir);
  unicode-bidi: embed;
}

咱们拆开来理清楚每部分的作用：

• 第一行的选择器专门处理组的边界：只要.group段落前面不是同组段落（不管是普通段落还是其他元素），就重置方向变量，确保新组从初始状态开始，不会被上一组的样式影响。
• 针对带dir属性的组首段落，我们把它的文本方向值存入CSS变量--group-dir，同时直接应用对应的direction属性；加上unicode-bidi: embed是为了确保文本排版规则正确生效，尤其是在混合方向文本的场景下不会出问题。
• 最后用相邻兄弟选择器+，让每个.group段落把自己的--group-dir变量传递给下一个同组段落——这样不管组内有多少个段落，都会顺着继承组首的方向值，完全不用管段落数量多少。

几个需要注意的点：

• 这个方案依赖CSS变量支持，现在主流浏览器（Chrome、Firefox、Edge、Safari 15.4及以上）都已经完美兼容，不用担心兼容性问题。
• 不像那种链式写p.group + p.group + p.group的笨办法，这个方案是动态传递变量的，不管组内有多少段落都能覆盖到，完全没有层数限制。
• unicode-bidi属性千万别漏，它是和direction配合生效的关键，少了它可能会出现文本排版错乱的情况。

这个方案完全不需要碰HTML，纯CSS就能搞定你的需求，我之前做类似需求的时候亲测有效~

内容来源于stack exchange