У меня есть переменные в моем 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;
}

Я не понимаю, в чем проблема.

css
-1
sport tv 18 Май 2019 в 02:52

2 ответа

Лучший ответ

:special не является признанным селектором, который, скорее всего, является причиной вашей проблемы здесь. Люди склонны добавлять глобальные пользовательские объявления свойств CSS в селектор :root {}. Или просто поместите их в родительский селектор, который вы используете.

:root {
  --col: blue;
}

.class-name {
  color: var(--col);
}
0
JAK 18 Май 2019 в 01:19

:special является недействительным селектором . Правила в недействительных селекторах игнорируются согласно спецификации, поэтому ваша переменная никогда не определяется .

0
connexo 17 Май 2019 в 23:55