一个用于匹配动态类名的CSS通配符选择器？ [英] A CSS wildcard selector to match dynamic classnames?

问题描述

我的应用程序中有一个任务列表。一些任务具有子任务，它们通过属性附加到他们的父母身上。

I have a tasks list on my application. Some tasks have subtasks, which are attached to their parents on my html code through a property.

这些任务在一个列表中（父任务和子任务），其中有不是元素的层次结构，只是一个简单的< li> 元素。他们对父对象的唯一附件是data-parent属性。

These tasks are on a list (both parent and child tasks) in which there is no hierarchy of elements, just a plain <li> elements. The only attachment they have to the parent is the data-parent property.

我想将一个类应用于共享父项的每个元素，如果类名称是静态的，但由于它是动态的，所以它更难一些。

I want to apply a class to every element that shares the parent, it would be easy if the class names were static, but since it's dynamic, it's a bit more difficult..

我试图完成的任务：

What I'm trying to accomplish:

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

这将是一个静态类，我想这样的通配符：

This would be a static class, I'm thinking something like this with a wildcard of sorts:

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

显然，这两个* s都会匹配相同的类，而不是任何类。

On which, obviously, both *s would match the same class, and not any class.

关于如何实现这一点的任何想法？

Any idea on how that can be achieved?

推荐答案

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

It looks like you're trying to match elements whose data-parent attribute corresponds to an existing number based on another element's .parent-element* class. Unfortunately, Selectors does not support this.

根据你对标记的描述，我不认为除了DOM操作外，还有很多其他的方法。我希望补充一点，那就是最好在子任务上标记嵌套列表。但是，如果您无法控制源标记，则必须另行寻找其他方法。

Based on your description of the markup I don't think there's much of a way around this other than DOM manipulations. I do wish to add though, that subtasks should ideally be marked up with nested lists. However if you have no control over the source markup, you'll have to find another way.

这篇关于一个用于匹配动态类名的CSS通配符选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！