CSS attr() 函数获取变量的方法
CSS attr() 函数可以像JS一样获取变量了，这个对于前端开发是非常方便的事情。例如我们可以使用CSS attr() 函数来获取当前超链接的链接地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学做网站论坛</title>
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>
<body>
<p><a href="https://www.xuewangzhan.com/">学做网站论坛</a></p>
<p><a href="https://www.xuewangzhan.com/">HTML 教程</a></p>
<p><strong>注意:</strong> IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。</p>
</body>
</html>
除了获取href的值之外，我们还可以使用CSS attr() 函数来获取data的传值。
<h3><a href="index14.html"><span data-title="关于我们">关于我们</span></a></h3>
<style>content: attr(data-title);</style>
以上就是CSS attr() 函数二种常用的应用。