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

Question

我正在尝试（可能是鲁莽的）在 CSS 中复制 Douglas Crockford 所说的底值。

什么是底值？

在 Javascript 中，底部值为

undefined

和

null

。

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

data-my-custom-attribute=""

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

U+2400

）：

data-my-custom-attribute="␀"

在 CSS 中，我可以引用任何自定义数据属性 is 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

对。结论。

正如 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"])

   // 

  值不是 valueOR 不是data-attribute
• :not([data-attribute^="value"])

   // 

  值 不以 valueOR 不 data-attribute 开头
• :not([data-attribute*="value"])

   // 

  值不包含 valueOR 不包含data-attribute
• :not([data-attribute$="value"])

   // 

  值 不以 valueOR 结尾 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 结尾

Answer 2

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

[att!=val]

 选择器（多年来一直是 jQuery 独有的），也不需要存在该属性来匹配，因此您仍然需要将其与 

[att]

 配对。

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

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

 选择器，在 JS 中分别使用 

if (myCustomAttribute === "")

 或 

if (("myCustomAttribute" in myDiv.dataset) === false)

 选择器。 

属性选择器是用属性来选择的，例如：

Answer 3

示例：

<style>
   a[target="_blank"] {
      background-color: yellow;
  }
</style>

<a href="http://www.google.com" target="_blank">google.com</a>