Question

我找到了几年前的许多答案（如this），说“不”。但是，有变化吗？例如，现在可以这样：

#property1 {
    height: 100px
}

#property2 {
    height: calc(#property1.height + 50px)
}

我知道我可以用jquery做到这一点，但是只能用css做吗？

Answer 1

不，这在简单的CSS中是不可能的，但你可以在LESS中做这样的事情：

@size: 100px;
#property1 {
  height: @size;
}
#property2 {
  height: @size + 50px;
}

了解更多信息here。

Answer 2

不是纯粹的CSS，但是你可以用sass或更少的前处理器来做到这一点。

这是一个写在sass上的例子：

$height: 100px;
#property1 {
    height: $height;
}

#property2 {
    height: $height + 50px;
}

PS：不要听“少”的人，他们错了：D

SASS

Answer 3

未来......几乎就在这里。

正如其他人所建议的那样，可以使用预处理器来实现这一目标。但是，如果你是那种熬夜阅读草案规范的人，那么你会对 drumroll CSS变量感到兴奋！

去，看看这里：

http://dev.w3.org/csswg/css-variables/

（MDN if draft specs don't get your juices flowing）

非常棒，有一个类似于你问题的例子！

one   { --foo: 10px; }
two   { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }

很好，对吧？！

好吧，坏消息......不幸的是，支持很可怕。

http://caniuse.com/#feat=css-variables

但是，在未来（和手指交叉），我们将有原生的CSS变量！

Answer 4

是的！但是如果secound div是一个孩子的话

＆＃13;

#property1 {
    height: 100px;
    width:320px;
    background:red
}

#property2 {
    height: calc(100% + 50px);
    width:100%;
    background:green
}

＆＃13;

<div id=property1>
    <div id=property2></div>
</div>

＆＃13;

如果您不想将其作为孩子使用，那么现在是时候学习CSS预处理器，例如Less或Sass

可以从另一个css规则引用css属性吗？

4 个答案: