CSS通配符选择器以匹配动态类名称

Question

我在应用程序上有一个任务列表。某些任务具有子任务，这些任务通过属性在我的HTML代码上附加在父母上。

这些任务在没有元素层次结构的列表中（父母和子任务），只是普通的<li>元素。他们对父母的唯一附件是数据 - 父母属性。

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

我要完成的工作：

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

这将是一个静态课，我在考虑这样的通配符的事情：

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

显然，这两个 *s都与同一类匹配，而不是任何类别。

对如何实现这一目标有什么想法？

Answer 1

看起来您正在尝试匹配 data-parent属性的元素，其属性基于另一个元素的.parent-element*类对应于现有数字。不幸的是，选择器不支持这一点。

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