---
id: 5a9d725e424fe3d0e10cad10
title: Use CSS Variables to change several elements at once
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS变量一次更改多个元素
---
## Description
CSS变量是一种通过仅更改一个值来一次更改许多CSS样式属性的强大方法。按照以下说明查看如何仅更改三个值可以更改许多元素的样式。
## Instructions
在penguin
类中,将black
值更改为gray
,将gray
值更改为white
,将yellow
值更改为orange
。
## Tests
```yml
tests:
- text: penguin
类应声明--penguin-skin
变量并将其指定为gray
。
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "penguin
class should declare the --penguin-skin
variable and assign it to gray
.");'
- text: penguin
类应声明--penguin-belly
变量并将其指定为white
。
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "penguin
class should declare the --penguin-belly
variable and assign it to white
.");'
- text: penguin
类应声明--penguin-beak
变量并将其指定为orange
。
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), "penguin
class should declare the --penguin-beak
variable and assign it to orange
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```