如何在单个div内实现多种超链接样式？

Question

我正在尝试创建一个具有两种同时样式的超链接的 div。第一个超链接用于更重要的链接，第二个超链接与描述主要链接相关。重点是让主链接突出，而次要链接不引人注目。现在不幸的是它不适用，所有链接都显示为默认的蓝色和紫色等。

如果有任何不清楚的地方，我们深表歉意，这是我第一次在这里发帖。

这是我的 HTML：

<div class="mainContent">
    <a href="https://primary.org" id="primaryLink">The Primary site</a> is a project by the <a href="https://secondary.org" id="secondaryLink">Secondary site/a> that aims to xyz.
</div>

这是我的CSS：

#primaryLink a:link{font-size:20;color:#93186F}
#primaryLink a:visited{font-size:20;color:#77023F}

#secondaryLink a:link{text-decoration:none;color:white;}
#secondaryLink a:visited{text-decoration:none;color:white;}

期望的输出是这样的： 主站点是辅助站点的一个项目，旨在xyz。

Answer 1

您的 html 和 css 中有很多错误。尝试以下操作：

#primaryLink {
  font-size: 20;
  color: #93186F;
}

#primaryLink: visited {
  font-size: 20;
  color: #77023F;
}

#secondaryLink {
  text-decoration: none;
  color: white;
}

#secondaryLink: visited {
  text-decoration: none;
  color: white;
}


/*add background color to see the format you want */

body {
  background-color: gray;
}

<div class="mainContent">
  <a href="https://primary.org" id="primaryLink">The Primary site</a> is a project by the <a href="https://secondary.org" id="secondaryLink">Secondary site</a> that aims to xyz.
</div>