任务 1
在此任务中，我们希望您使用我们在控制继承部分中介绍的特殊值之一。
要完成任务，请在新规则中编写一个声明，将背景颜色重置为白色，而无需使用实际的颜色值。
您的最终结果应如下面的图片所示
html
<div class="container" id="outer">
<div class="container" id="inner">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
css
#outer div ul .nav a {
background-color: powderblue;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
div div li a {
color: rebeccapurple;
}
点击此处显示解决方案
一种可能的解决方案如下：
css
#outer #inner a {
background-color: inherit;
}
在此任务中，您需要做两件事。首先，为 a 元素编写一个选择器，该选择器比用于将背景设置为粉蓝色（powderblue）的选择器更具体。在此解决方案中，这是通过使用具有非常高特异性的 id 选择器来实现的。
然后，您需要记住所有属性都有特殊的关键字值。在这种情况下，使用 inherit 会将背景颜色重置为与其父元素相同。
任务 2
要完成此任务，请操作级联层顺序，将链接颜色设置为 rebeccapurple。不要编辑 lightgreen 声明！
此任务是一个进阶目标 — 它需要级联层知识，这在处理冲突文章中并未涵盖。您可以在级联层 > 基于层顺序确定优先级中找到尝试此任务所需的信息。
您的最终结果应如下面的图片所示
html
<div class="container" id="outer">
<div class="container" id="inner">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
css
@layer yellow, purple, green;
@layer yellow {
#outer div ul .nav a {
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
}
@layer purple {
div div li a {
color: rebeccapurple;
}
}
@layer green {
a {
color: lightgreen;
}
}
点击此处显示解决方案
一种可能的解决方案如下：
css
@layer yellow, green, purple;
在此任务中，您只需要做一件事：更改优先级顺序，使所需颜色的声明位于最后声明的层中，这正是此解决方案所示。
您需要记住，未分层的普通样式优先于分层的普通样式。但是，如果所有样式都在层内（如本任务所示），则后声明的层中的样式会优先于先声明的层中的样式。将紫色层移到最后意味着它优先于绿色和黄色层。