我正在试验(可能是鲁莽的(在CSS中复制Douglas Crockford所说的底部值。
底部值是多少
在Javascript中，底部值为
undefined和null。
我可以使用自定义数据属性：
data-my-custom-attribute=""
我可以给它一个null的值(使用UnicodeU+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="␀"])
感觉既尴尬又冗长。真的没有什么比这更好的了吗？
右侧。结论。
正如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或没有data-attribute:not([data-attribute^="value"])//值不以value或无data-attribute开始:not([data-attribute*="value"])//值不包含value或不包括data-attribute:not([data-attribute$="value"])//值不以value或无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结尾
不幸的是，没有比这更简洁的方法了。即使是jQuery的[att!=val]选择器(多年来一直是jQuery独有的(，也不需要存在属性来进行匹配，因此您仍然需要将其与[att]配对。
我知道这是对底值概念的一次实验，但为了完整起见，我将添加到HTML(以及扩展CSS(中最接近null属性值的东西要么是空字符串(自定义数据属性的默认值(，要么是完全缺少属性的。实现所需结果的惯用方法是选择空字符串或完全省略属性，并在CSS中分别使用相应的[data-my-custom-attribute=""]或:not([data-my-custom-attribute])选择器，在JS中分别使用if (myCustomAttribute === "")或if (("myCustomAttribute" in myDiv.dataset) === false)选择器。