属性的 CSS3 选择器“具有任何值且不为空或空白”答案

【问题标题】：CSS3 selector for attribute that is "has ANY value and is not null or blank"属性的 CSS3 选择器“具有任何值且不为空或空白”
【发布时间】：2016-06-13 00:25:33
【问题描述】：

我似乎无法为“任何非空值或空白值”找到 css3 通配符。

我有一堆 div，其中一些有一个名为data-group-id 的属性，但不是全部。我想查找所有具有该属性 data-group-id 且不为空的 div。

例如，我有这些 div：

<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required="1"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required="1"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required data-group-id="55"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required data-group-id="55"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required data-group-id="15"></div>

如您所见，最后 3 个 div 有一个名为 data-group-id 的属性。

我想要一个可以找到这三个元素的选择器。本质上我正在尝试执行此逻辑

$parent.find('div[data-role="mergeSelector"][data-group-id="*"]')

其中 * 是一个通配符，表示“有一个值，但与值无关”。

是否存在一个选择器来完成此操作？我在互联网上找不到任何东西。

谢谢！

感谢您的帮助，完成查询如下：

$parent.find('div[data-role="mergeSelector"][data-group-id]:not([data-group-id=‌""])')

【问题讨论】：

标签： jquery css css-selectors wildcard

【解决方案1】：

[data-group-id]:not([data-group-id=""])

这将选择一个具有该属性的元素，只要它不为空。

【讨论】：

这个匹配<div data-group-id></div>吗？
对于其他可能需要它的人，我完成的查询是：$parent.find('div[data-role="mergeSelector"][data-group-id]:not([data-group-id=""])')。 @Quantastical我刚刚测试了这个理论，不，即使它具有属性，它也没有选择那个div。因为属性是空白的，所以不会忽略它。谢谢！

【解决方案2】：

你写道：

...* 是一个通配符，表示 有一个值，但值是什么并不重要。

给你：

div[data-group-id] { ... }

来自规范：

6.3.1. Attribute presence and value selectors

[att]

表示具有att 属性的元素，无论其值为多少属性。

【讨论】：

也许 OP 的用词选择不准确，但如果属性未设置为任何内容或空字符串，问题显然不想匹配。