Question

我的CSS中有变量，但是无法识别。我曾尝试像下面的代码那样设置变量，但是当我在chrome中运行它时不起作用。

li {
    border: 2px solid red;
}

:special {
    background: yellow;
    --col: blue;
}

.completed {
    text-decoration: line-through lime;
    color: var(--col);
}

但是当我直接设置为蓝色时，它会像这样

li {
    border: 2px solid red;
}

:special {
    background: yellow;
    --col: blue;
}

.completed {
    text-decoration: line-through lime;
    color: blue;
}

我不明白是什么问题。

Answer 1

:special是无效的选择器。根据规范，无效选择器中的规则将被忽略，因此您的变量从未定义。

Answer 2

:special不是公认的选择器，很可能在这里引起您的问题。人们倾向于将全局自定义CSS属性声明添加到:root {}选择器中。或者只是将它们的作用域限定为您正在使用的父选择器。

:root {
  --col: blue;
}

.class-name {
  color: var(--col);
}

为什么虽然我已经阅读了很多有关CSS的变量的说明，但是它们却无法正常工作？

2 个答案: