高级 CSS/Jquery 选择器

Posted 2023-03-06

【中文标题】高级 CSS/Jquery 选择器

【英文标题】：Advanced CSS/Jquery selector

【发布时间】：2015-03-07 07:37:00

【问题描述】：

我有以下元素：

<div customAttribute="1" > element 1 </div>
<div customAttribute="1-1" > element 1-1 </div>
<div customAttribute="1-1-1" > element 1-1-1 </div>
<div customAttribute="1-1-2" > element 1-1-2 </div>
<div customAttribute="1-2" > element 1-2 </div>

如何使用 customAttribute 获取所有元素

1-1,
1-2,
...
1-n

但不是

1-1-1,
1-1-2,
...
1-1-n

使用 CSS 选择器？

【问题讨论】：

wildcard * in CSS for classes的可能重复

@Antony 这个问题和我的不一样。就我而言，我想获取与“1-”匹配的所有元素，但我不想获取与 1-*

匹配的元素

How is that not the same?

那么你必须这样做the hard way。

@Antony 没办法，这些元素是动态生成的。

【参考方案1】：

据我了解，您可以使用div[customAttribute^='1-']:not([customAttribute^='1-1-'])。 如您所见，这将适用于 jquery 和 css： http://jsfiddle.net/597y2e6r/1/

如果不是这种情况，您需要更复杂的模式匹配 css 可能不是最好的工具...您可以改用 filter。

【讨论】：

如果有1-2-n 元素和1-n-n 元素，那么除了根据需要重复尽可能多的:not()s 之外别无他法。如果不以某种方式修改 html，过滤器路由将是最好的。