如何通过CSS同时选中继承父级direction与带行内direction的.col-ml-auto元素？

现有如下HTML结构：

<html>
  ...
  <body style="direction: rtl;">
    <div class="col-ml-auto">
      继承body方向的元素
    </div>
    ...
    <div class="col-ml-auto" style="direction: ltr;">
      强制设置LTR方向的元素
    </div>
  </body>
</html>

我尝试了两种CSS选择器写法，但各自存在局限：

• 写法一：可以选中继承父级direction的元素，但无法匹配自身带有行内direction样式的元素

.col-ml-auto{margin-left:auto}
[style*="rtl"] .col-ml-auto{margin-left:unset;margin-right:auto}

• 写法二：可以选中自身带有行内direction样式的元素，但无法匹配继承父级direction的元素

.col-ml-auto{margin-left:auto}
.col-ml-auto[style*="rtl"]{margin-left:unset;margin-right:auto}

请问如何编写选择器，同时覆盖这两种情况？

将两种场景的选择器合并，用逗号分隔即可同时匹配父级带有RTL行内样式的子元素和自身带有RTL行内样式的元素：

.col-ml-auto {
  margin-left: auto;
}

/* 合并两个选择器，覆盖两种场景 */
[style*="rtl"] .col-ml-auto,
.col-ml-auto[style*="rtl"] {
  margin-left: unset;
  margin-right: auto;
}

如果需要更精准的匹配（避免style属性中其他包含rtl的字符串干扰），可以指定匹配direction: rtl的具体样式，兼容带空格和不带空格的写法：

[style*="direction: rtl"] .col-ml-auto,
[style*="direction:rtl"] .col-ml-auto,
.col-ml-auto[style*="direction: rtl"],
.col-ml-auto[style*="direction:rtl"] {
  margin-left: unset;
  margin-right: auto;
}

不过如果项目中行内样式的写法比较规范，使用[style*="rtl"]的简洁写法就足够满足需求。

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