首页 / 前端 / CSS / CSS3 :root 选择器中的var()和:root
CSS3 :root 选择器中的var()和:root
歪脖37684 CSS
1066浏览
2022-02-18 22:46:53

刷微博无意间看到:root,var()这样的写法,孤陋寡闻的我赶紧学习了一下,分享分享:

var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)

:root

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

:root {
    --main-color: hotpink;
    --pane-padding: 5px 42px;
}
p {
  color: var(--main-color);
  padding: var(--pane-padding);
}
相关推荐