嗨，谁能帮我完成我的 CSS 作业？答案

【问题标题】：hi can anyone help me with my css assignment?嗨，谁能帮我完成我的 CSS 作业？
【发布时间】：2021-02-12 02:18:36
【问题描述】：

我有这段代码需要处理：

<!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 个链接（谷歌链接）的颜色为绿色，第三个链接为红色？我必须使用选择器和伪类。谁能告诉我怎么做？

【问题讨论】：

可以给a添加类吗？
请edit您的问题表明您已经完成了哪些研究以及您根据该研究所做的任何尝试。拨打tour 并阅读How to Ask，了解有关本网站的更多提示和提问。另见How do I ask and answer homework questions?
我不认为我可以添加类..

标签： html css

【解决方案1】：

您可以使用: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>

Codepen：https://codepen.io/manaskhandelwal1/pen/Yzpprjw

【讨论】：

【解决方案2】：

a:nth-child(any number here)

a:nth-child(1), a:nth-child(2){
  color: green;
}
a:nth-child(3){
  color: red;
}

<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>

【讨论】：

谢谢它似乎在这里工作但是当我把它放在可视代码中并测试它时，第一个链接是红色的，其余的蓝色 wtf 正在进行
您的代码中可能还有其他as。试试body > a:nth-child(any number)也许会有所帮助。

【解决方案3】：

你可以使用attribute selectors:

/* This will match both google links because they both start with "https://www.google.com/" */
a[href^="https://www.google.com/"]{
    color: green;
}

/* This will exactly match "https://www.link-group.eu/" */
a[href="https://www.link-group.eu/"] {
    color: red;
}

<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>

【讨论】：

这种分配任务的“复杂”方式。使用:nth-child 或:nth-of-type 将是解决问题的更“简单”的方法。此外，无需更改块级元素的链接。 PS：投反对票不是因为技术错误（您的解决方案显然有效），而是缺少任务的简单性以及更改为不需要的块级元素。
@tacoshy 我删除了display:block。那是我最初草稿的遗留物，我只在我的截图中包含了a 元素。现在，它们到底有多“复杂”？ OP没有说明使用什么方法。由于两个 google 链接都应该是绿色的并且不能使用任何类，我最初的想法是通过 href 选择。一个选择器用于两个谷歌链接，一个选择器用于另一个链接。我们也无法判断该页面是否还包含其他链接。我提出的方法无论如何都是安全的。
是的，它对你我或任何优秀的程序员来说并不复杂。关于分配任务的事情是，它们被评为简单的解决方案。例如，如果链接会发生变化，那么解决方案可能不再有效。因此，恕我直言，:nthselector 解决方案是解决所有情况下问题的最简单但也是最有效的方法。
@tacoshy 是的，我同意第一部分。我只是不同意“to solve the issue for all cases.”。我编辑了我之前的评论。如果网站上确实有多个链接，那么所有其他解决方案（在撰写本文时）将不再有效。 href 选择器适用于任何 a 数量。但是由于 OP 表示他的问题已解决，因此没有其他链接，仅此而已。感谢您的澄清（以及撤回反对票）:)