使用 CSS 变量更改多个元素样式

在CSS中，我们可以使用自定义属性（也称为CSS变量）来定义和使用变量。然后，我们可以在多个CSS选择器中重复使用这些变量。这样，如果我们需要更改这些变量的值，我们只需要在一个地方更改它们，然后所有使用这些变量的元素都会自动更新。

以下是一些使用CSS变量的方法：

方法一：在根元素（:root）中定义全局CSS变量，然后在其他选择器中使用这些变量。

:root {
  --main-bg-color: coral;
  --main-text-color: white;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}
 
h1 {
  color: var(--main-text-color);
}

在这个例子中，我们在根元素（:root）中定义了两个变量：--main-bg-color和--main-text-color。然后我们在body和h1选择器中使用这些变量。如果我们需要更改这些颜色，我们只需要在:root中更改它们，然后所有使用这些变量的元素都会自动更新。

方法二：在特定的选择器中定义CSS变量，然后在其他选择器中使用这些变量。

.container {
  --container-bg-color: skyblue;
  background-color: var(--container-bg-color);
}
 
.container p {
  color: var(--container-bg-color);
}

在这个例子中，我们在.container类中定义了一个变量--container-bg-color。然后我们在.container类和.container p选择器中使用这个变量。如果我们需要更改背景颜色，我们只需要在.container类中更改它，然后所有使用这个变量的元素都会自动更新。

方法三：在JavaScript中动态更改CSS变量。

document.documentElement.style.setProperty('--main-bg-color', 'green');

在这个例子中，我们使用setProperty方法在JavaScript中动态更改了--main-bg-color变量的值。然后所有使用这个变量的元素的背景颜色都会自动更新为绿色。

以上就是一些使用CSS变量更改多个元素样式的方法。