如何基于计算样式而非内联样式创建CSS选择器？

我们可以通过属性选择器匹配元素的内联样式，示例如下：

[style*='flex-direction: row'] {
  /* some properties */
}

但我想知道：能不能基于计算样式（而非内联样式）实现同样的匹配效果？

我做过测试：当flex-direction通过HTML内联样式设置时，上述类型的CSS选择器能正确匹配元素（显示绿色背景）；但如果flex-direction是通过外部CSS规则设置的，选择器就无法匹配（显示红色背景）。

我希望避免的替代方案 #

• 遍历所有设置了display: flex的CSS规则，为对应的.separator创建子规则来设置光标样式
• 使用外部依赖库

补充说明（XY问题背景） #

我正在用原生JS实现flex元素的调整功能，目前已有可行的解决方案，但要确保所有分隔符都设置正确的光标样式需要做大量繁琐工作。

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