今天突发奇想,html和css传参能不能将长宽高,字体颜色....能想到的css样式都传到css里面?就像下面:
CSS2:attr(属性名) —— 一次无聊的瞎折腾-Qui-Note
我们想象中的效果应该是这样的:
CSS2:attr(属性名) —— 一次无聊的瞎折腾-Qui-Note

可实际是,浏览器什么都没有显示,What?F12查看一下不得了,全部撂挑子不干了?然后又想到之前总是通过伪元素+attr获取内容,就继续尝试泽腾:
CSS2:attr(属性名) —— 一次无聊的瞎折腾-Qui-Note
接着,就发现,除了伪元素内的content接受到了html传的参数,其余的都失败了:

CSS2:attr(属性名) —— 一次无聊的瞎折腾-Qui-Note

CSS2:attr(属性名) —— 一次无聊的瞎折腾-Qui-Note

结果证明:CSS2的attr传参|获取参数,仅对伪元素:content属于有效!

最后,去度娘了一下,发现张鑫旭曾经一篇文章写过这个问题《Polyfill吊炸天的CSS attr()新语法》,他最后借助了js和css变量完成了这样的效果,有兴趣的可以去看一下:https://gitee.com/zhangxinxu/css-attr-polyfill/blob/master/css-attr.js

css离less,sass这些差距越来越远,不知道什么时候也多加一下具备循环、动态绑定等功能,希望有机会见证原生css变强大。