我正在尝试（可能有点鲁莽）在CSS中重现Douglas Crockford所说的底部值。

什么是底值？

在Javascript中，底部值为undefined和null。

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

data-my-custom-attribute=""

并且我可以给它一个null值（使用Unicodeu+2400):

data-my-custom-attribute="␀"

在CSS中，我可以引用任何为空的自定义数据属性：

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

  [... CSS PROPERTIES HERE...]

}

接下来，我要部署一个与此JavaScript相当的：

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

但我似乎不能引用任何非空的自定义数据，因为如下所示：

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

  [... CSS PROPERTIES HERE...]

}

无效且无效。

已确定：

• [data-my-custom-attribute！=“”]

不起作用，我突然想到：

• [data-my-custom-attribute]:不([data-my-custom-attribute=“”])

实际上是有效的（如果没有其他问题，我会坚持这样做）。

工作示例：

null

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>

null

然而,

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

感觉又尴尬又冗长。真的没有更好的了吗？