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中，我们执行以下步骤来查找值：

要在属性值中替换var（）：


如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的长手之一中使用，则将custom属性视为具有其初始值该算法其余部分的价值。

如果由var（）函数的第一个参数命名的自定义属性的值不是初始值，请用相应的自定义属性的值替换var（）函数。

否则，如果var（）函数将后备值作为第二个参数，则用后备值替换var（）函数。如果回退中有任何var（）引用，请也将其替换。

否则，包含var（）函数的属性在计算值时间无效。

（2）和（3）无关紧要，将始终为我们提供价值。（1）告诉我们将自定义属性的值视为initial，我们将落入（3）或（4）。

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

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

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

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

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

如果未设置CSS关键字从其父项继承，则将其重置为继承值，如果不是，则将其重置为初始值。换句话说，在第一种情况下，它的行为类似于Inherit关键字，在第二种情况下，其行为与初始关键字^ref

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

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

更新

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

CSS-::使用var（）后备广告的选择

1 个答案: