面试题：CSS变量相关应用

CSS变量的定义方式

在CSS中，变量定义在 :root 选择器或特定元素选择器内，使用 --变量名: 值; 的语法。例如：

:root {
  --primary-color: #007BFF;
}

这里在 :root（代表文档根元素，即 html 元素）中定义了一个名为 --primary-color 的变量，值为蓝色 #007BFF。也可在特定元素选择器中定义，如：

body {
  --secondary-color: #28A745;
}

在不同选择器中复用变量

使用 var(--变量名) 语法来复用变量。例如：

h1 {
  color: var(--primary-color);
}
button {
  background-color: var(--primary-color);
  border-color: var(--secondary-color);
}

这里 h1 元素的文本颜色和 button 元素的背景色都复用了 --primary-color 变量，button 的边框颜色复用了 --secondary-color 变量。

实际应用场景及代码示例

场景：网站主题颜色切换。假设网站有一个默认的主要颜色，通过切换主题可以改变主要颜色。

:root {
  --primary-color: #007BFF;
}
.theme-dark {
  --primary-color: #343A40;
}
h1 {
  color: var(--primary-color);
}
button {
  background-color: var(--primary-color);
  color: white;
}

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS变量示例</title>
</head>

<body>
  <h1>欢迎来到我的网站</h1>
  <button>点击我</button>
  <button onclick="document.body.classList.toggle('theme-dark')">切换主题</button>
</body>

</html>

当点击“切换主题”按钮时，body 元素会添加或移除 theme-dark 类，从而改变 --primary-color 变量的值，实现网站主要颜色的切换。

星途面试题库

面试题：CSS变量相关应用

知识考点

面试题答案

CSS变量的定义方式

在不同选择器中复用变量

实际应用场景及代码示例