1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: 'Test your skills: Selectors'
slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
---
<div>{{LearnSidebar}}</div>
<p>这个任务的目的是帮助你理解CSS里的选择器。</p>
<div class="blockIndicator note">
<p><strong>Note</strong>:你可以 在下面那些交换编辑器中尝试解决问题，然而 把代码下载然后使用一个在线工具比如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> 去解决这些问题可能对你更有作用。</p>
<p>如果你卡住了，可以向我们寻求帮助 — 请参阅本页底部的<a href="#assessment_or_further_help">Assessment or further help</a> 部分。</p>
</div>
<h2 id="选择器一">选择器一</h2>
<p>在没有改变HTML的情况下，使用CSS去完成下面的要求：:</p>
<ul>
<li>使一级标题的字体颜色为蓝色</li>
<li>使二级标题有一个蓝色背景且白色文本。</li>
<li>使跨距中换行的文本的字体大小为200%。</li>
</ul>
<p><img alt="Text with the CSS applied for the solution to task 1." src="https://mdn.mozillademos.org/files/17118/selectors1.jpg" style="height: 781px; width: 1026px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="选择器二">选择器二</h2>
<p>在没有改变HTML的情况下，对本例中内容的外观进行以下更改：</p>
<ul>
<li>让id为 <code>special</code> 的元素有一个黄色背景。</li>
<li>让使用类 <code>alert</code> 的元素有一个 1px 的灰色边框。</li>
<li>如果一个元素使用了 <code>alert</code> 类还有 <code>stop</code>类， 让它的背景变为红色。</li>
<li>如果一个元素使用 <code>alert</code> 类还有 <code>go</code>类，让它的背景变为绿色。</li>
</ul>
<p><img alt="Text with the CSS applied for the solution to task 2." src="https://mdn.mozillademos.org/files/17119/selectors2.jpg" style="height: 891px; width: 1027px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="选择器三">选择器三</h2>
<p>在本例中，尝试在不添加HTML的情况下进行以下更改。</p>
<ul>
<li>链接文本的样式：使链接为橘色，被访问后变为绿色，当被hover时，移除链接文本的下划线。</li>
<li>让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。</li>
<li>让表格中每隔一行条带化，分别给它们一个颜色为#333的背景和一个白色前景。</li>
</ul>
<p><img alt="Text with the CSS applied for the solution to task 3." src="https://mdn.mozillademos.org/files/17120/selectors3.jpg" style="height: 926px; width: 1227px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="选择器四">选择器四</h2>
<p>在这个任务中尝试下面这个任务:</p>
<ul>
<li>让任何直接跟随二级标题的段落颜色为红色。</li>
<li>移除使用了list类的无效列表的儿子元素前面的原点并给他们添加一个1px的灰色下边框。</li>
</ul>
<p><img alt="Text with the CSS applied for the solution to task 4." src="https://mdn.mozillademos.org/files/17121/selectors4.jpg" style="height: 788px; width: 1222px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="选择器五">选择器五</h2>
<p>在最后一个任务中，使用属性选择器添加CSS以执行以下操作：</p>
<ul>
<li>Target the <code><a></code> element with a <code>title</code> attribute and make the border pink (<code>border-color: pink</code>).</li>
<li>Target the <code><a></code> element with an <code>href</code> attribute that contains the word <code>contact</code> somewhere in its value and make the border orange (<code>border-color: orange</code>).</li>
<li>Target the <code><a></code> element with an <code>href</code> value starting with <code>https</code> and give it a green border (<code>border-color: green</code>).</li>
</ul>
<p><img alt="Four links with different color borders." src="https://mdn.mozillademos.org/files/17147/selectors-attribute.png" style="height: 485px; width: 1264px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="Assessment_or_further_help">Assessment or further help</h2>
<p>You can practice these examples in the Interactive Editors mentioned above.</p>
<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
<ol>
<li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
<li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
<ul>
<li>A descriptive title such as "Assessment wanted for Selectors skill test 1".</li>
<li>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.</li>
<li>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.</li>
<li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
</ul>
</li>
</ol>
|
