Test your skills: Selectors
这个任务的目的是帮助你理解 CSS 里的选择器。
备注: 你可以 在下面那些交换编辑器中尝试解决问题,然而 把代码下载然后使用一个在线工具比如 CodePen, jsFiddle, or Glitch 去解决这些问题可能对你更有作用。
如果你卡住了,可以向我们寻求帮助 — 请参阅本页底部的Assessment or further help 部分。
选择器一
在没有改变 HTML 的情况下,使用 CSS 去完成下面的要求::
- 使一级标题的字体颜色为蓝色
- 使二级标题有一个蓝色背景且白色文本。
- 使跨距中换行的文本的字体大小为 200%。
Try updating the live code below to recreate the finished example:
备注: 如需提交测评或进一步练习,下载本任务的初始文件,然后在本地或在线编辑器中练习。
选择器二
在没有改变 HTML 的情况下,对本例中内容的外观进行以下更改:
- 让 id 为
special
的元素有一个黄色背景。 - 让使用类
alert
的元素有一个 1px 的灰色边框。 - 如果一个元素使用了
alert
类还有stop
类,让它的背景变为红色。 - 如果一个元素使用
alert
类还有go
类,让它的背景变为绿色。
Try updating the live code below to recreate the finished example:
备注: 如需提交测评或进一步练习,下载本任务的初始文件,然后在本地或在线编辑器中练习。
选择器三
在本例中,尝试在不添加 HTML 的情况下进行以下更改。
- 链接文本的样式:使链接为橘色,被访问后变为绿色,当被 hover 时,移除链接文本的下划线。
- 让容器里的第一个元素的字体大小为:150%,并且让这个元素的第一行是红色的。
- 让表格中每隔一行条带化,分别给它们一个颜色为#333 的背景和一个白色前景。
Try updating the live code below to recreate the finished example:
备注: 如需提交测评或进一步练习,下载本任务的初始文件,然后在本地或在线编辑器中练习。
选择器四
在这个任务中尝试下面这个任务:
- 让任何直接跟随二级标题的段落颜色为红色。
- 移除使用了 list 类的无序列表的子元素前面的圆点,并给他们添加一个 1px 的灰色下边框。
Try updating the live code below to recreate the finished example:
备注: 如需提交测评或进一步练习,下载本任务的初始文件,然后在本地或在线编辑器中练习。
选择器五
在最后一个任务中,使用属性选择器添加 CSS 以执行以下操作:
- Target the
<a>
element with atitle
attribute and make the border pink (border-color: pink
). - Target the
<a>
element with anhref
attribute that contains the wordcontact
somewhere in its value and make the border orange (border-color: orange
). - Target the
<a>
element with anhref
value starting withhttps
and give it a green border (border-color: green
).
Try updating the live code below to recreate the finished example:
备注: 如需提交测评或进一步练习,下载本任务的初始文件,然后在本地或在线编辑器中练习。
打分评估或进一步帮助
你可以在上面的交互式编辑器中练习示例这些示例。
如果你想得到任务评价,或者遇到了问题需要帮助,请按如下操作进行:
- 将你的作业上传到可共享的在线编辑器上,比如 CodePen、jsFiddle 或 Glitch。你可以自己编写代码,也可以使用上面给出的初始文件。
- 在 MDN 论坛的学习板块上发帖以寻求打分或帮助。你的帖子中应包含:
- 一个简述问题的标题。如“Assessment wanted for Selectors skill test 1”(请使用英文发帖)。
- 详细描述你的尝试和你预期的网页效果。比如你在哪个位置需要帮助,或者你需要打分评估。
- 你需要打分或帮助的作业链接(通过上述的在线编辑器上传)。只有让别人看到你的代码,你才能得到更好的帮助。
- 本题的链接。让别人知道你所问的具体题目。