CSS

Question

我正在尝试使用 css 变量更改整个网页的选择颜色：

html {
  --my-var: red;
}

 ::selection {
  background-color: var(--my-var);
}

<p>a b c</p>
<div>
  <p>x y z</p>
</div>

我正确地看到应用了选择样式。但是，如果 var 引用了一个未定义的变量，则根本没有选择颜色：

html {
  --my-var: red;
}

::selection {
  background-color: var(--not-my-var);
}

如何为使用 css 变量值（如果存在）或退回到默认浏览器选择颜色的整个页面定义选择颜色？我试过 var(--not-my-var, unset)、var(--not-my-var, inherit) 和 var(--not-my-var, initial)，但它们似乎不起作用

Answer 1

获得所需内容的唯一方法是确保该值无效，以便浏览器将忽略它并回退到默认值：

::selection {
  background-color: something_invalid;
}

<p>a b c</p>
<div>
  <p>x y z</p>
</div>

不幸的是，使用 var(--variable) 时将无法做到这一点，因为该值永远不会无效。

从 the specificatition 我们有以下步骤来查找值：

To substitute a var() in a property’s value:

If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.

If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.

Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.

Otherwise, the property containing the var() function is invalid at computed-value time.

(2) 和 (3) 是微不足道的，总会给我们一个值。 (1)告诉我们把自定义属性的值当成initial，我们就会陷入(3)或(4).

对于(4)我们也可以从同样的规范中读到：

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword.

background-color 不是继承的，所以它将使用它的初始值，即 transparent 这就是为什么你看不到颜色。

现在，如果我们考虑回退情况 (3)

using initial表示背景色初始值如此透明
使用inherit表示继承颜色但是没有什么可以继承那么透明了
使用 unset 我们将混合使用 inherit 和 initial

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case ^ref

您唯一的机会可能是使用 revert，但支持率非常低，我不确定它是否有效。

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). ^ref

更新

根据下面的评论，revert 似乎也是不可能的。

CSS — ::selection with var() fallback

CSS — ::selection with var() fallback

html

css-variables