技能测试：选择器 - 学习 Web 开发

任务 1

完成任务

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

您的最终结果应如下面的图片所示

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

html

<div class="container">
  <h1>This is a heading</h1>
  <p>
    Veggies es <span>bonus vobis</span>, proinde vos postulo essum magis
    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
    garlic.
  </p>
  <h2>A level 2 heading</h2>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Add styles here */

点击此处显示解决方案

您需要定位 h1、h2 和 span 选择器来更改它们的颜色或大小。

css

h1 {
  color: blue;
}

h2 {
  background-color: blue;
  color: white;
}

span {
  font-size: 200%;
}

任务 2

完成任务

为 id 为 special 的元素设置黄色背景。
为 class 为 alert 的元素设置 2px 的实心灰色边框。
如果 class 为 alert 的元素同时还有 class stop，则将背景设为红色。
如果 class 为 alert 的元素同时还有 class go，则将背景设为绿色。

您的最终结果应如下面的图片所示

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

html

<div class="container">
  <h1>This is a heading</h1>
  <p>
    Veggies es <span class="alert">bonus vobis</span>, proinde vos postulo
    <span class="alert stop">essum magis</span> kohlrabi welsh onion daikon
    amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <h2 id="special">A level 2 heading</h2>
  <p>Gumbo beet greens corn soko endive gumbo gourd.</p>
  <h2>Another level 2 heading</h2>
  <p>
    <span class="alert go">Parsley shallot</span> courgette tatsoi pea sprouts
    fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
    earthnut pea peanut soko zucchini.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
/* Add styles here */

点击此处显示解决方案

这测试了您是否理解类选择器和 ID 选择器之间的区别，以及如何定位元素上的多个类。

css

#special {
  background-color: yellow;
}

.alert {
  border: 2px solid grey;
}

.alert.stop {
  background-color: red;
}

.alert.go {
  background-color: green;
}

任务 3

完成任务

为链接设置样式，使链接状态为橙色，已访问链接为绿色，并移除悬停时的下划线。
将容器内的第一个元素设置为 font-size: 150%，并将该元素的第一行设置为红色。
通过选择表格中的间隔行并为其设置 #333333 的背景色和白色前景，来实现斑马条纹效果。

您的最终结果应如下面的图片所示

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

html

<div class="container">
  <p>
    Veggies es <a href="http://example.com">bonus vobis</a>, proinde vos postulo
    essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon
    azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <table>
    <tbody>
      <tr>
        <th>Fruits</th>
        <th>Vegetables</th>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Potato</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td>Carrot</td>
      </tr>
      <tr>
        <td>Tomato</td>
        <td>Parsnip</td>
      </tr>
      <tr>
        <td>Kiwi</td>
        <td>Onion</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>Beet</td>
      </tr>
    </tbody>
  </table>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 300px;
}

td,
th {
  padding: 0.2em;
  text-align: left;
}

/* Add styles here */

点击此处显示解决方案

将伪类（:first-child）和伪元素（::first-line）应用于内容。为 a 元素的 :link、:visited 和 :hover 状态设置样式，并使用 :nth-child 伪类创建斑马条纹表格行。

css

.container p:first-child {
  font-size: 150%;
}

.container p:first-child::first-line {
  color: red;
}

a:link {
  color: orange;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

tr:nth-child(even) {
  background-color: #333333;
  color: white;
}

任务 4

完成任务

将 <h2> 元素后面直接跟着的任何段落设置为红色。
移除项目符号，并仅为 class 为 list 的 <ul> 的直接子列表项添加 1px 的灰色底部边框。

您的最终结果应如下面的图片所示

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

html

<div class="container">
  <h2>This is a heading</h2>
  <p>This paragraph comes after the heading.</p>
  <p>This is the second paragraph.</p>

  <h2>Another heading</h2>
  <p>This paragraph comes after the heading.</p>
  <ul class="list">
    <li>One</li>
    <li>
      Two
      <ul>
        <li>2.1</li>
        <li>2.2</li>
      </ul>
    </li>
    <li>Three</li>
  </ul>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

/* Add styles here */

点击此处显示解决方案

此任务检查您是否理解如何使用不同的组合器。以下是一个适当的解决方案

css

h2 + p {
  color: red;
}

.list > li {
  list-style: none;
  border-bottom: 1px solid #cccccc;
}

任务 5

要完成任务，请使用属性选择器为以下挑战提供解决方案

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

您的最终结果应如下面的图片所示

Four links with different color borders.

html

<ul>
  <li><a href="https://example.com">Link 1</a></li>
  <li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
  <li><a href="/contact">Link 3</a></li>
  <li><a href="../contact/index.html">Link 4</a></li>
</ul>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 0.5em;
}

a {
  display: block;
  padding: 0.5em;
}

a {
  border: 5px solid grey;
}

/* Add styles here */

点击此处显示解决方案

要选择具有 title 属性的元素，我们可以在方括号内添加 title（a[title]），这将选择第二个链接，它是唯一具有 title 属性的链接。
定位 href 属性中包含单词“contact”的 <a> 元素，并将边框设置为橙色（border-color: orange）。这里有两个匹配项：href 值 /contact 和 ../contact。因此，我们需要使用 *= 匹配值中的任意位置的字符串“contact”。这将选择第三个和第四个链接。
定位 href 值以 https 开头的 <a> 元素，并为其设置绿色边框（border-color: green）。查找以“https”开头的 href 值，因此使用 ^= 来仅选择第一个链接。

css

a[title] {
  border-color: pink;
}
a[href*="contact"] {
  border-color: orange;
}
a[href^="https"] {
  border-color: green;
}

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 8 月 21 日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题