如何创建 css 选择器，其目标元素的属性不为空

Question

用 button[data-state] 定位 button#1 很容易，但我如何用另一个选择器定位另外两个。

<button id=1 class=notify data-state> some text </button>
<button id=2 class=notify data-state="downloading"> some text </button>
<button id=3 class=notify data-state="render"> some text </button>

我正在寻找可以定位非空属性的选择器。如何做到这一点？

Answer 1

button[data-state]:not([data-state=""]) {
  background-color: red;
}

<button id=1 class=notify data-state> some text </button>
<button id=2 class=notify data-state="downloading"> some text </button>
<button id=3 class=notify data-state="render"> some text </button>

如何创建 css 选择器，其目标元素的属性不为空

How to create css selector that target element with attr that not empty

css

selector