attr()可以获取所选元素的属性值
伪元素中可以看到通过attr()获取父元素的背景色、内容等，但是只有伪元素可以。
虽然css已经标准化，但是各大浏览器不约而同都 没有实现：
但是可以通过css var() 自定义属性实现
通过动态写入style的自定义属性，然后在目标dom上添加改属性即可。
vue：
:style="`--fontsize: ${x * 2}px`"
css：
.target-dom {
font-size: var(--fontsize);
}
完整html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hello</title>
<style>
.test1 {
font-size: var(--fontsize);
}
</style>
</head>
<body>
<div id="test">
<div style="font-size: 12px">
<div class="test1">组件内的样式，无法通过组件style修改样式</div>
<div class="test1">但又想要 <span style="color: red">动态</span> 修改</div>
</div>
</div>
<!-- 模拟js动态写入style,比如vue :style="" -->
<script>
document.getElementById('test').setAttribute('style', `--fontsize: ${2 * 12}px`)
</script>
</body>
</html>
大家都在用 var()啦，兼容问题不大
