原文網址: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>
結果