欢迎光临
我们一直在努力

CSS自定义属性(变量)

Github上有个叫electron-api-demos的项目,看代码的时候发现了这么一个css文件(variables.css):

:root在html文档里对应的就是html标签选择器,:root伪类和html标签选择器这两个的区别基本上就是前者的优先级更高一些。但是,那些–color是什么东西?

根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables,这个叫CSS自定义属性(CSS变量),是具有继承性质的,在:root中定义CSS变量的话,等于是在定义全局变量,在其他具体的选择器(如上述代码中的.u-category-windows)里定义CSS变量等于是在该选择器及其后台选择器这个范围内定义了一个局部变量。下面是这种变量的使用示例:

说明:.about中定义了一个–about-space局部变量,其值为4rem,在.about-header中通过var(–about-space)来使用前面定义的值4rem,也就是说.about-header的样式等价于:

写在最后,CSS自定义属性,嗯,IE浏览器是不支持的。

赞(0) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » CSS自定义属性(变量)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

上海宝山顾村棉被加工店 专业加工新旧棉被

查看详情了解一下

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏