--- title: 'Test your skills: Selectors' slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks ---

这个任务的目的是帮助你理解CSS里的选择器。

Note:你可以在下面那些交换编辑器中尝试解决问题，然而把代码下载然后使用一个在线工具比如 CodePen, jsFiddle, or Glitch 去解决这些问题可能对你更有作用。

如果你卡住了，可以向我们寻求帮助 — 请参阅本页底部的Assessment or further help 部分。

选择器一

在没有改变HTML的情况下，使用CSS去完成下面的要求：:

使一级标题的字体颜色为蓝色
使二级标题有一个蓝色背景且白色文本。
使跨距中换行的文本的字体大小为200%。

Text with the CSS applied for the solution to task 1.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

选择器二

在没有改变HTML的情况下，对本例中内容的外观进行以下更改：

让id为 special 的元素有一个黄色背景。
让使用类 alert 的元素有一个 1px 的灰色边框。
如果一个元素使用了 alert 类还有 stop类，让它的背景变为红色。
如果一个元素使用 alert 类还有 go类，让它的背景变为绿色。

Text with the CSS applied for the solution to task 2.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

选择器三

在本例中，尝试在不添加HTML的情况下进行以下更改。

链接文本的样式：使链接为橘色，被访问后变为绿色，当被hover时，移除链接文本的下划线。
让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。
让表格中每隔一行条带化，分别给它们一个颜色为#333的背景和一个白色前景。

Text with the CSS applied for the solution to task 3.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

选择器四

在这个任务中尝试下面这个任务:

让任何直接跟随二级标题的段落颜色为红色。
移除使用了list类的无效列表的儿子元素前面的原点并给他们添加一个1px的灰色下边框。

Text with the CSS applied for the solution to task 4.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

选择器五

在最后一个任务中，使用属性选择器添加CSS以执行以下操作：

Target the <a> element with a title attribute and make the border pink (border-color: pink).
Target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange).
Target the <a> element with an href value starting with https and give it a green border (border-color: green).

Four links with different color borders.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help

You can practice these examples in the Interactive Editors mentioned above.

If you would like your work assessed, or are stuck and want to ask for help:

Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include:
- A descriptive title such as "Assessment wanted for Selectors skill test 1".
- Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
- A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
- A link to the actual task or assessment page, so we can find the question you want help with.