匹配动态类名的 CSS 通配符选择器？

Question

我的应用程序上有一个任务列表。有些任务有子任务，它们通过属性附加到我的 html 代码上的父级。

这些任务位于一个列表（父任务和子任务）中，其中没有元素层次结构，只有一个普通的 <li> 元素。他们对父级的唯一附件是 data-parent 属性。

我想为每个共享父元素的元素应用一个类，如果类名是静态的会很容易，但由于它是动态的，所以有点困难..

我想要完成的事情：

.parent-element4322.red ~ li[data-parent=4322]{
    background:red
}

这将是一个静态类，我正在考虑类似这样的通配符：

.parent-element*.red ~ li[data-parent=*]{
    background:red
}

显然，两个 * 将匹配同一个类，而不是任何类。

知道如何实现这一目标吗？

Answer 1

您似乎正在尝试匹配其data-parent 属性对应于基于另一个元素的.parent-element* 类的现有数字的元素。不幸的是，Selectors does not support this。

根据您对标记的描述，我认为除了 DOM 操作之外没有其他方法可以解决这个问题。不过，我确实希望补充一点，理想情况下，子任务应该用嵌套列表进行标记。但是，如果您无法控制源标记，则必须找到另一种方法。