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

Question

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

\n

\n

什么是底值？

\n

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

\n

\n

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

\n

data-my-custom-attribute=""\n

\n

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

\n

data-my-custom-attribute="\xe2\x90\x80"\n

\n

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

\n

[data-my-custom-attribute="\xe2\x90\x80"] {\n\n  [... CSS PROPERTIES HERE...]\n\n}\n

\n

接下来，我想部署与此 Javascript 等效的代码：

\n

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

\n

但似乎我无法引用任何不为 null的自定义数据，因为像这样：

\n

[data-my-custom-attribute!="\xe2\x90\x80"] {\n\n  [... CSS PROPERTIES HERE...]\n\n}\n

\n

不起作用且无效。

\n

---

\n

经确定：

\n

\n
• [data-my-custom-attribute!="\xe2\x90\x80"]
\n

\n

不起作用，我突然想到：

\n

\n
• [data-my-custom-attribute]:not([data-my-custom-attribute="\xe2\x90\x80"])
\n

\n

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

\n

工作示例：

\n

\r\n

\r\n

data-my-custom-attribute=""\n

\r\n

data-my-custom-attribute="\xe2\x90\x80"\n

\r\n

\r\n

\r\n

\n

然而，

\n

[data-my-custom-attribute]:not([data-my-custom-attribute="\xe2\x90\x80"])\n

\n

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

\n

Answer 1

正确的。结论。

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

• [data-attribute="value"]//有，其data-attribute值为 value
• [data-attribute^="value"]// has data-attribute，其值以 value
• [data-attribute*="value"]// has data-attribute，其值包含 value
• [data-attribute$="value"]// has 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 OR no开头data-attribute
• :not([data-attribute*="value"])//值不包含 value OR nodata-attribute
• :not([data-attribute$="value"])//值不以 value OR no结尾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