CSS--:root指定变量,其他元素引用
原文网址:CSS--:root指定变量,其他元素引用-CSDN博客
简介
本文介绍CSS中使用变量的方法。
场景描述
CSS可以使用变量,比如:指定整个网页的主体颜色作为变量,其他的元素去使用这个颜色。这样在修改颜色时,只修改这个变量即可。
一般在:root里去指定变量,:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,与 html 选择器相同,但是:root的优先级更高。
示例
<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title><style>:root {--main-color: #007bff;--border: 1px solid rgb(200, 200, 200)}.test {color: var(--main-color);border: var(--border);}</style>
</head><body><div class="test">测试
</div></body></html>
结果