CSS — ::带有var（）后备广告的选择

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)该值将无法实现，因为该值永远不会无效。

从规范中，我们可以按照以下步骤查找值：

要将var（）替换为属性值：

1. 如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的一手惯用中使用，则将custom属性视为具有其初始值作为此算法的其余部分。
2. 如果由var（）函数的第一个参数命名的自定义属性的值不是初始值，请用相应的自定义属性的值替换var（）函数。
3. 否则，如果var（）函数将后备值作为第二个参数，则用后备值替换var（）函数。如果回退中有任何var（）引用，请也替换它们。
4. 否则，包含var（）函数的属性在计算值时间无效。

（2）和（3）是微不足道的，将始终为我们提供价值。（1）告诉我们将自定义属性的值视为initial，我们将落入（3）或（4）。

对于（4），我们还可以从相同的规范中读取：

如果声明包含一个以初始值引用自定义属性的var（），则声明在计算值时可能无效，如上所述，或者该声明使用一个有效的自定义属性，但在替换var（）之后使用该属性值）功能，无效。发生这种情况时，该属性的计算值分别是该属性的继承值或其初始值，具体取决于该属性是否被继承，就好像该属性的值已被指定为unset关键字一样。

background-color不是继承的，因此它将使用其初始值，这就是transparent为什么您看不到颜色的原因。

现在，如果我们考虑后备情况（3）

• 使用initial表示背景颜色的初始值如此透明
• 使用inherit手段继承颜色，但没有什么可以继承的那么透明
• 使用unset我们将有inherit和initial

如果未设置CSS关键字从其父项继承，则将关键字重置为该属性的继承值，否则将其重置为初始值。换句话说，它的行为就像在第一种情况下关键字继承，并且像在第二情况下，最初的关键字^REF

您唯一的机会可能是使用，revert但支持率很低，我不确定它是否会起作用。

CSS CSS关键字revert将属性的级联值从其当前值恢复为该属性应具有的值（如果当前样式原点未对当前元素进行任何更改）。因此，如果属性从其父项继承，则将属性重置为其继承的值，或者重置为由用户代理的样式表（或如果存在的话，由用户样式）建立的默认值。^参考

更新资料

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