我如何在 CSS 中构建负属性选择器？

Question

我正在试验（可能是有勇无谋）在 CSS 中复制道格拉斯·克罗克福德所说的底值 .

What's a bottom value?

In Javascript, bottom values are undefined and null.

我可以使用自定义数据属性：

data-my-custom-attribute=""

我可以给它一个值 null（使用 Unicode U+2400）：

data-my-custom-attribute="␀"

在 CSS 中，然后我可以引用任何是 null:

的自定义数据属性

[data-my-custom-attribute="␀"] {

  [... CSS PROPERTIES HERE...]

}

接下来，我想部署与此等效的 Javascript:

if (myCustomAttribute !== null) { ... }

但似乎我不能引用任何不是的自定义数据null，因为像 this:

[data-my-custom-attribute!="␀"] {

  [... CSS PROPERTIES HERE...]

}

无效且无效。

确定：

[data-my-custom-attribute!="␀"]

不起作用，我突然想到：

[data-my-custom-attribute]:not([data-my-custom-attribute="␀"])

实际上确实有效（如果没有其他问题，我会坚持下去）。

工作示例：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

.rectangle {
  display: block;
  width: 450px;
  height: 60px;
  margin-top: 12px;
  background-color: orange;
}

[data-my-custom-attribute="red"] {
  background-color: red;
}

[data-my-custom-attribute="yellow"] {
  background-color: yellow;
}

[data-my-custom-attribute="blue"] {
  background-color: blue;
}

[data-my-custom-attribute="␀"] {
  border-radius: 0;
  background-color: black;
}

[data-my-custom-attribute]:not([data-my-custom-attribute="␀"]) {
  border-radius: 50%;
}

<div data-my-custom-attribute="red"></div>
<div data-my-custom-attribute="yellow"></div>
<div data-my-custom-attribute="blue"></div>
<div data-my-custom-attribute="␀"></div>

<div class="rectangle"></div>

然而，

[data-my-custom-attribute]:not([data-my-custom-attribute="␀"])

感觉笨拙和冗长。真的没有更好的了吗？

Answer 1

不幸的是，没有更简洁的方法。即使 jQuery 的 [att!=val] 选择器，这些年来一直是 jQuery 独有的，也不需要存在该属性来匹配，因此您仍然需要将其配对[att].

我知道这是对底值概念的实验，但为了完整起见，我将在 HTML 中添加最接近 null 属性值的东西（并扩展为 CSS) 要么是空字符串（自定义数据属性的默认值），要么是完全缺少的属性。实现所需结果的惯用方法是选择空字符串或完全省略属性，并分别在 CSS 和 [=14] 中使用相应的 [data-my-custom-attribute=""] 或 :not([data-my-custom-attribute]) 选择器=] 或 if (("myCustomAttribute" in myDiv.dataset) === false) 分别在 JS.

Answer 2

对。结论。

正如CSS中已经存在的属性选择器：

[data-attribute="value"] // 有data-attribute，其中的值为 value
[data-attribute^="value"] // 有data-attribute，其值以开头 value
[data-attribute*="value"] // 有data-attribute，其值包含 value
[data-attribute$="value"] // 有data-attribute，其值以结尾 value

我希望可能是这样的：

[data-attribute!="value"] // 有data-attribute，的值不是 value

然后，通过扩展：

[data-attribute!^="value"] // 有 data-attribute 并且其值不以开头 value
[data-attribute!*="value"] // 有data-attribute，其值不包含 value
[data-attribute!$="value"] // 有 data-attribute 并且其值不以结尾 value

但是，我们只有：

:not([data-attribute="value"]) // 值不是 value OR 否 data-attribute
:not([data-attribute^="value"]) // 值不以开头 value OR 否data-attribute
:not([data-attribute*="value"]) // 值 不包含 value OR 否data-attribute
:not([data-attribute$="value"]) // 值不以结尾 value OR 否data-attribute

所以摆脱替代可能性的唯一方法（即在逻辑 OR 之后）是：

[data-attribute]:not([data-attribute="value"]) // data-attribute 值不是 value
[data-attribute]:not([data-attribute^="value"]) // 值不以开头 value
[data-attribute]:not([data-attribute*="value"]) // 值 不包含 value
[data-attribute]:not([data-attribute$="value"]) // 值不以结尾 value

我如何在 CSS 中构建负属性选择器？

How might I build a negative attribute selector in CSS?

javascript

css

null

css-selectors