Как выбрать элементы, которые имеют переменную Speci c css, определенную в его теге стиля?

Question

Есть ли способ выбрать элементы, для которых в теге style определена переменная c 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

Используйте атрибут селектора, как ваш первый код:

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

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

Answer 2

Есть ли способ выбрать элементы, для которых определена переменная c 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>