CSS知识点之CSS 中的 :root 与 var()

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

定义 :root 后，所有变量都将被保存在 :root 中，并且可以在整个页面的任何位置使用。这使得我们可以轻松地为网站设置一些通用的变量，如颜色、字体、间距等等。

var()

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

示例

:root {
  --primary-color: #007bff; /* 设置主要颜色（蓝色） */
  --secondary-color: #6c757d; /* 设置次要颜色（灰色） */
  --font-family: Arial, sans-serif; /* 设置字体 */
}
body {
  font-family: var(--font-family); /* 使用 var() 函数调用字体 */
  background-color: var(--primary-color); /* 使用 var() 函数调用背景色 */
  color: var(--secondary-color); /* 使用 var() 函数调用文字颜色 */
}

posted on 2024-08-15 19:10  梁飞宇  阅读(51)  评论(0)    收藏  举报