如何选择在其样式标签中定义了特定css变量的元素？

Question

是否可以选择在其样式标签中定义了特定css变量的元素？我猜它不可用，因为它会对全局变量起奇怪的作用，但也许有办法。例如更改此：

<div data-icon style="--icon: url(...)"></div>
<style>
div[data-icon]::before {
    ...
    background-image: var(--icon);
    ...
}
</style>

到类似的东西：

<div style="--icon: url(...)"></div>
<style>
div:hasvar(--icon)::before {
    ...
    background-image: var(--icon);
    ...
}
</style>

Answer 1

是否可以选择具有特定css变量的元素是否在其样式标签中定义？

是。您可以使用var()功能来做到这一点。

[注意：您可能需要在:root中定义变量以使其成为全局变量

:root {
  --icon: url('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg');
}

div {
    background-image: var(--icon);
    background-size: 100px 100px;
    width: 100px;
    height: 100px;
}

<div></div>

Answer 2

像第一个代码一样使用属性选择器：

div[style*="--icon"]::before {
  content: "I have a variable";
  background-image: var(--icon);
}

<div style="--icon: url(...)"></div>
<div></div>