Обновление CSS переменных с помощью attr ()

Question

Почему это работает, и выдает :before и говорит "изменено"

:root {
    --namevar: "fallback";
}

.in[name] {
    --namevar: "changed";
}

.in dd:first-of-type:before {
    font-weight: bold;
    display: block;
    content: var(--namevar);
}

Но если вы измените его на это, :before будет потеряно?

.in[name] {
    --namevar: attr(name);
}

Ни одна из этих работ:

.in dd:first-of-type:before {
    content: attr(name, inherit);
}

.in[name] dd {
    name: inherit;
}

HTML будет выглядеть примерно так:

<div class="in" name="this">
    <dd>one</dd>
    <dd>two</dd>
    <dd>three</dd>
</div>

Чего мне здесь не хватает?

Answer 1

Использование --namevar: attr(name); работает нормально, но вам нужно понять, как оно работает.

Пример:

:root {
    --namevar: "fallback";
}


.in dd:before {
    font-weight: bold;
    content: var(--namevar);
}

.in[name] {
    --namevar: attr(name);
}

<div class="in" name="this">
    <dd>one</dd>
    <dd name="ok ">two</dd>
    <dd>three</dd>
</div>

Обратите внимание, что во втором случае мы показываем «ОК» и ничего для остальных, потому что они не имеют атрибута имени. При использовании .in[name] {--namevar: attr(name);} это не значит получить значение атрибута name, принадлежащего .in, и сохранить его внутри переменной. Это означает, что значение переменной attr(name) не более того. Мы разрешаем значение только тогда, когда используется переменная, и в вашем случае она используется внутри dd, поэтому мы учитываем имя атрибута (если оно существует) dd.

Другими словами, вы не можете использовать CSS переменных для хранения значения атрибута элемента и использования его позже внутри любого дочернего элемента. То, что вы можете сделать, это сохранить ваш первоначальный пример и вместо атрибута вы рассматриваете CSS переменную, как показано ниже:

:root {
    --namevar: "fallback";
}


.in dd:before {
    font-weight: bold;
    content: var(--namevar);
}

<div class="in" style="--namevar:'this '">
    <dd>one</dd>
    <dd name="ok">two</dd>
    <dd>three</dd>
</div>

Answer 2

Это потому, что ваша переменная css определяет переменную ближайших родителей. Вы можете переопределить, используя глобальный селектор "*"

, просто используйте в css

*{
    --namevar: "fallback";
}

и попробуйте. если больше поможет. не стесняйтесь спрашивать меня.