CSS 技能测试：选择器

题目链接

选择器一

（略）

选择器二

题目要求：

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

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 代码：

 #special{
  background-color:yellow;
}
.alert{
  border:1px solid grey;
}
.alert.stop{
  background-color:red;
}
.alert.go{
  background-color:green;
}

选择器三

题目要求：

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

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 代码：

a{
  color:orange;
}
a:visited{
  color:green;
}
a:hover{
  text-decoration:none;
}
.container p:first-child{
  font-size:150%
}
.container p:first-child::first-line{
  color:red;
}
tr:nth-child(2n+2){
  background-color: #333;
  color:white
}

选择器四

题目要求：

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

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 代码：

h2 + p{
  color:red;
}
.list > li{
  list-style:none;
  border-bottom: 1px solid lightgrey;
}

选择器五

题目要求：

• 选择带有 title 属性的 <a> 元素，将其边框颜色设置为粉色（border-color: pink）。
• 选择带有 href 属性且属性值中包含 contact 的 <a> 元素，将其边框颜色设置为橙色（border-color: orange）。
• 选择 href 属性值以 https 开头的 <a> 元素，将其边框颜色设置为绿色（border-color: green）。

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 代码：

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