测试你的技能：选择器

¥Task 1

在此任务中，使用 CSS 执行以下操作，而不更改 HTML：

¥In this task, use CSS to do the following things, without changing the HTML:

• 将 <h1> 标题设为蓝色。
• 将 <h2> 标题设置为蓝色背景和白色文本。
• 使 <span> 中的文本字体大小为 200%。

你的最终结果应如下图所示：

¥Your final result should look like the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

¥Task 2

在此任务中，我们希望你对此示例中的内容外观进行以下更改，而不更改 HTML：

¥In this task, we want you to make the following changes to the look of the content in this example, without changing the HTML:

• 为 id 为 special 的元素指定黄色背景。
• 给 alert 类的元素一个 1px 的灰色边框。
• 如果具有 alert 类的元素也具有 stop 类，则将背景设为红色。
• 如果具有 alert 类的元素也具有 go 类，则将背景设置为绿色。

你的最终结果应如下图所示：

¥Your final result should look like the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

¥Task 3

在此任务中，我们希望你进行以下更改而不添加到 HTML：

¥In this task, we want you to make the following changes without adding to the HTML:

• 设置链接样式，使链接状态变为橙色，访问过的链接变为绿色，并删除悬停时的下划线。
• 设置容器内第一个元素的字体大小：150%，该元素的第一行为红色。
• 通过选择这些行并将它们的背景色设置为#333，将前景色设置为白色，从而在表中每隔一行进行条纹化。

你的最终结果应如下图所示：

¥Your final result should look like the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

¥Task 4

在此任务中，我们希望你执行以下操作：

¥In this task, we want you to do the following:

• 将直接跟随 <h2> 元素的任何段落设为红色。
• 删除项目符号并添加 1px 灰色底部边框，仅列出属于 ul 的直接子级且类别为 list 的项目。

你的最终结果应如下图所示：

¥Your final result should look like the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

¥Task 5

在此任务中，使用属性选择器添加 CSS 来执行以下操作：

¥In this task, add CSS using attribute selectors to do the following:

• 将 <a> 元素定位为 title 属性，并将边框设为粉红色 (border-color: pink)。
• 将 <a> 元素定位为具有 href 属性，该属性在其值中的某处包含单词 contact，并将边框设置为橙色 (border-color: orange)。
• 将 <a> 元素定位为以 https 开头的 href 值，并为其指定绿色边框 (border-color: green)。

你的最终结果应如下图所示：

¥Your final result should look like the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example: