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

Question

我的申请表上有一个任务列表。有些任务有子任务，它们通过属性附加到我的 html 代码上的父任务。

这些任务在一个列表(包括父任务和子任务)中，其中没有元素层次结构，只有一个普通的 <li>。元素。他们对父级的唯一附件是数据父级属性。

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

我要实现的目标:

.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 操作之外没有其他解决方法。不过，我确实想补充一点，理想情况下，子任务应该用嵌套列表标记。但是，如果您无法控制源标记，则必须找到另一种方法。