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

我正在用CSS复制道格拉斯·克罗克福德（Douglas Crockford）所说的底部值（可能是鲁莽的）

什么是底部值？

在Javascript中，底部的值是

未定义的

和

null

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

data-my-custom-attribute=""

我可以给它一个值null（使用Unicode

U+2400

）：

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

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

  [... CSS PROPERTIES HERE...]

}

接下来，我要部署一个与此Javascript等效的：

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

但我似乎无法引用任何非空的自定义数据，因为类似于this：

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

  [... CSS PROPERTIES HERE...]

}

不起作用，也无效

---

确定：

• [数据我的自定义属性！=”␀"]

不起作用，我突然想到：

• [数据我的自定义属性]：不是（[数据我的自定义属性=”␀“]）

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

工作示例：

div{
显示：内联块；
宽度：100px；
高度：100px；
右边距：12px；
}
.矩形{
显示：块；
宽度：450px；
高度：60px；
边缘顶部：12px；
背景颜色：橙色；
}
[数据我的自定义属性=“红色”]{
背景色：红色；
}
[数据我的自定义属性=“黄色”]{
背景颜色：黄色；
}
[数据我的自定义属性=“蓝色”]{
背景颜色：蓝色；
}
[数据我的自定义属性=”␀"] {
边界半径：0；
背景色：黑色；
}
[数据我的自定义属性]：非（[数据我的自定义属性=”␀"]) {
边界半径：50%；
}

---

不幸的是，没有一种更简洁的方法。即使是jQuery的

[att！=val]

选择器，这些年来一直是jQuery独有的，也不要求属性出现才能匹配，因此您仍然需要将其与

[att]

配对

---

我知道这是一个关于底值概念的实验，但为了完整起见，我要补充的是，在HTML（以及扩展CSS）中，最接近空属性值的是空字符串（自定义数据属性的默认值）实现所需结果的惯用方法是选择空字符串或全部省略属性，并分别在CSS中使用相应的

[data my custom attribute=”“]

或

：not（[data my custom attribute]）

选择器和

if（myCustomAttribute===“”）

或

如果（（“myDiv.dataset中的myCustomAttribute”）分别在JS中===false）

。

不幸的是，没有更简洁的方法。甚至jQuery的

[att！=val]

selector多年来一直是jQuery的专有属性，它不要求属性必须存在才能匹配，因此您仍然需要将它与

[att]

配对

我知道这是一个关于底值概念的实验，但为了完整起见，我要补充的是，在HTML（以及扩展CSS）中，最接近空属性值的是空字符串（自定义数据属性的默认值）实现所需结果的惯用方法是选择空字符串或全部省略属性，并分别在CSS中使用相应的

[data my custom attribute=”“]

或

：not（[data my custom attribute]）

选择器和

if（myCustomAttribute==“”）

或

if（（“myDiv.dataset中的myCustomAttribute”）===false）

分别在JS中。

右。结论

正如CSS中已经存在以下属性选择器一样：

• [data attribute=“value”]

  //具有

  数据属性

  ，其值为

  值

• [data attribute^=“value”]

  //具有

  数据属性

  ，其值以

  值

• [数据属性*=“值”]

  //具有

  数据属性

  ，其值包含

  值

• [数据属性$=“值”]

  //具有

  数据属性

  ，其值以

  值

我希望会有这样的事情：

• [data attribute！=“value”]

  //具有

  数据属性

  ，其的值不是

  值

然后，通过延伸：

• [data attribute！^=“value”]

  //具有

  数据属性

  ，且其值不以

  值

• [数据属性！*=“值”]

  //具有

  数据属性

  ，且其值不包含

  值

• [data attribute！$=“value”]

  //具有

  数据属性

  ，其值不以

  值

---

但是，我们只有：

• ：not（[data attribute=“value”]）

  //value不是

  值

  或否

  数据属性

• ：not（[data attribute^=“value”]）

  //value不是以值开头的

• ：不（[data attribute*=“value”]）

  //value不包含

  值

  或无

  数据属性

• ：不（[data attribute$=“value”]）

  //value不以

  值

  或无数据属性

---

因此，消除替代可能性（即逻辑或之后）的唯一方法是

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

  [... CSS PROPERTIES HERE...]

}