attr：函数用于获取所选元素的属性值， 它接受三个参数，属性名称，类型和默认值。

语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )

示例：

<p data-text="you see"
  data-tooltip="cute!" class="attr">hover试一试：</p>

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

 calc:计算css的值

示例：

<style>
p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}
</style>
<p class="calc">Centered with calc</p>

var()通过这个函数，我们可以使用一个自定义属性的值作为另一个CSS属性的值。

简单地说，我们可以定义一个颜色，例如，将它放在自定义属性(CSS变量)中，然后通过调用var函数重用该属性值。

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用

<style>
:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}
</style>
<p class="var">Colored with var</p>