时间戳

首页 > 解决方案 > 嗨，谁能帮我完成我的 CSS 作业？

html - 嗨，谁能帮我完成我的 CSS 作业？

问题描述

我有我必须处理的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Advanced CSS - Assignment 1</title>
  <style>

  </style>
</head>

<body>
  <h1>Main Heading</h1>
  <p>Paragraph 1</p>
  <a href="https://www.google.com/">Google</a>
  <a href="https://www.google.com/doodles">Google Doodles</a>
  <a href="https://www.link-group.eu/" target="_blank">Goto Link Group</a>
  <div id="first-div">
    <h2>Subheading</h2>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <div id="second-div">
      <h3>Sub subheading</h3>
      <p>Paragraph 4</p>
      <p>Paragraph 5</p>
      <p>Paragraph 6</p>
      <p>Paragraph 7</p>
      <p>Paragraph 8</p>
    </div>
  </div>
  <p>Paragraph 9</p>
  <p>Paragraph 10</p>
</body>

</html>

如何在不更改代码的情况下更改前 2 个链接（谷歌链接）颜色为绿色和第三个链接为红色？我必须使用选择器和伪类。谁能告诉我该怎么做？

标签： htmlcss

解决方案

您可以使用:nth-of-type().

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Advanced CSS - Assignment 1</title>
  <style>
    a:nth-of-type(1),
    a:nth-of-type(2) {
      color: red;
    }
    
    a:nth-of-type(3) {
      color: green;
    }
  </style>
</head>

<body>
  <h1>Main Heading</h1>
  <p>Paragraph 1</p>
  <a href="https://www.google.com/">Google</a>
  <a href="https://www.google.com/doodles">Google Doodles</a>
  <a href="https://www.link-group.eu/" target="_blank">Goto Link Group</a>
  <div id="first-div">
    <h2>Subheading</h2>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <div id="second-div">
      <h3>Sub subheading</h3>
      <p>Paragraph 4</p>
      <p>Paragraph 5</p>
      <p>Paragraph 6</p>
      <p>Paragraph 7</p>
      <p>Paragraph 8</p>
    </div>
  </div>
  <p>Paragraph 9</p>
  <p>Paragraph 10</p>
</body>

</html>

代码笔： https ://codepen.io/manaskandelwal1/pen/Yzpprjw

推荐阅读