CSS计算与继承 [英] CSS calc with inherit

问题描述

我想使用继承与 calc（），如下所示：

  #foo {
 animation-duration：10s; 
} 
 #foo> .bar 
 {
 animation-duration：calc（inherit + 2s）; / * = 12s * / 
} 
  

但它似乎无效。 / p>

是否是浏览器错误或规格？

解决方案

$ c> inherit 关键字只能作为属性声明中的值单独存在。它不能与任何其他用作值，因为它是一个值本身。这意味着它不能与 calc（）的函数一起使用。请参见 CSS2.1 和 css3-cascade 。

此外， calc（）函数本身仅使用数字，尺寸和百分比等文字数值。

所以简单来说，规范不允许使用 inherit 。

I would like to use inherit with calc() like this :

#foo{
  animation-duration:10s;
}
#foo > .bar
{
  animation-duration:calc(inherit + 2s); /* =12s */
}

But it don't seem to works.

Is it browsers bug or specs?

解决方案

The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade.

Furthermore, the calc() function itself only takes literal numeric values such as numbers, dimensions and percentages.

So to put it simply, the spec doesn't allow using inherit that way.

这篇关于CSS计算与继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！