---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
challengeType: 0
videoUrl: ''
localeTitle: 级联CSS变量
---
## Description
创建变量时,您可以在创建变量的元素内使用它。它也可以在嵌套在其中的任何元素中使用。这种效应称为级联 。由于级联,CSS变量通常在:root元素中定义。 :root
是一个伪类选择器,它匹配文档的根元素,通常是
元件。通过在:root
创建变量,它们将在全局可用,并且可以在样式表中的任何其他选择器中访问。
## Instructions
在:root
选择器中定义一个名为--penguin-belly
的变量,并为其赋值pink
。然后,您可以在任何使用该变量的位置查看该值将如何级联以将值更改为粉红色。
## Tests
```yml
tests:
- text: '在:root
声明--penguin-belly
变量并将其指定为pink
。'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly
variable in the :root
and assign it to pink
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```