Eca*_*aru 5 css inheritance css-variables
我的问题是为什么 CSS 变量需要添加回退的概念，而不是像其他 CSS 属性一样依赖继承。
例如：
:root {
--color1: red;
}
body {
color: var(--color1);
}
body p {
color: var(--color2);
--color2: blue;
}
body span {
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4);
}<body>
Text 1
<p>
Text 2
</p>
<span>
Text 3
</span>
</body>文本 3 最终变成红色而不是绿色或黄色。尽管级别上存在有效属性，但它采用父颜色值，而不是验证同一级别上是否还有其他有效值。当变量名称无效时会发生这种情况。
显然，CSS 变量有一个特殊的回退，因此您需要使用以下内容：
color: var(--color4, yellow);
但这又意味着颜色的重复，因为
color: var(--color4, --color3);
不起作用。既不是：
color: var(--color3, yellow, blue);
或任何其他多个值。
也不支持像inherit、currentColor、initial等关键字。所以我不确定如何依赖继承，因为显然我需要对给定的值非常明确。在 Firefox 57.0.1 和 Chrome 63 上测试。
正如 JoseAPL 所说，var()表达式接受回退参数而不是默认继承的原因很简单，因为虽然自定义属性确实继承了，但并非所有标准属性都将与 do 一起使用。
另一方面，如果您问为什么var()表达式不默认为下一个最佳级联值，那是因为在var()计算表达式时，没有其他值可以回退到，因为 中的每个其他声明级联已被删除。见 3.1 节，它定义了术语在计算值时间无效：
注意：计算值时间无效概念的存在是因为变量不能像其他语法错误那样“过早失败”，所以当用户代理意识到属性值无效时，它已经被其他级联值丢弃了。
话虽如此，您可以提供一个自定义属性作为回退值（只要它不是相同的，原因与上述相同）——该自定义属性只需要出现在它自己的var()表达式中，因为回退值是，好吧，声明值，而不是属性名称。
所以结果是var()嵌套在另一个中var()：
body span {
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4, var(--color3));
}
:root {
--color1: red;
}
body {
color: var(--color1);
}
body p {
color: var(--color2);
--color2: blue;
}
body span {
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4, var(--color3));
}<body>
Text 1
<p>
Text 2
</p>
<span>
Text 3
</span>
</body>并非 CSS 中的所有属性都是继承的，请查看这些链接，以便您可以查看继承了哪些 CSS 属性以及如何应用继承：
https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
声明重复属性的顺序很重要。
如果您要应用的颜色green是不一样的：
// correct way to declare fallback color, it will be green and yellow if --color3 was not defined
body span {
--color3: green;
color: yellow;
color: var(--color3);
}
作为：
body span { // incorrect way to declare fallback color
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4);
}
该属性
color: var(--color4);将被采用，因为此声明中没有无效的语法，但由于没有声明为--color4将应用继承的颜色的变量（在这种情况下来自body { color: var(--color1) }）因为
color是继承财产
使用回退var()是另一种解决方案，但前一个是不支持的旧浏览器的回退var()
此外，您使用错误，使用回退的正确方法var()应该是这样的：
color: var(--color4, var(--color3));
或这个：
color: var(--color4, var(--color3, yellow));
var()只接受 2 个参数，您要使用的值和后备。
在以下链接中查看如何使用它的语法
由于var()不是所有浏览器还没有使用复制的特性以正确的方式是选择我会去的，或者您也可以与他们两个去了。
// correct way to declare fallback color, it will be green and yellow if --color3 was not defined
body span {
--color3: green;
color: yellow;
color: var(--color3);
}
body span { // incorrect way to declare fallback color
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4);
}
| 归档时间： |
|
| 查看次数： |
3530 次 |
| 最近记录： |