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

ruarlubt 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(132)

我正在尝试（可能是鲁莽的）在CSS中复制道格拉斯克罗克福德所说的底部值。

什么是底部值 *

在JavaScript中，底部值是undefined和null。
我可以使用custom-data属性：

data-my-custom-attribute=""

字符串
我可以给予它一个值null（使用Unicode U+2400）：

data-my-custom-attribute="␀"

型
在CSS中，我可以引用任何 *is *null**的custom-data属性：

[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

来源：https://stackoverflow.com/questions/67127281/how-might-i-build-a-negative-attribute-selector-in-css

3条答案

按热度按时间

z9ju0rcb1#

好吧。结论。
就像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不以value开头或no data-attribute *
:not([data-attribute*="value"])// * 值不包含value或无data-attribute *
:not([data-attribute$="value"])// *value不以value结尾或no data-attribute *

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

[data-attribute]:not([data-attribute="value"])// * data-attribute值不是value *
[data-attribute]:not([data-attribute^="value"])// *value不以value * 开头开始
[data-attribute]:not([data-attribute*="value"])// * 值不包含value *
[data-attribute]:not([data-attribute$="value"])// *value不以value * 结尾

赞(0）回复(0）举报 2024-01-09

wnavrhmk2#

不幸的是，没有更简洁的方法了，即使是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)选择器。

赞(0）回复(0）举报 2024-01-09

5q4ezhmt3#

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

示例：

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

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

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

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

3条答案

相关问题

热门标签

最新问答