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

你的样式没生效主要是两个原因：

1. CSS选择器写法错误 #

你给<a>标签直接设置了id，但CSS里却写了#primaryLink a:link——这个选择器是找id为primaryLink的元素内部的a标签，但你的a标签本身就是带这个id的元素，所以根本匹配不到目标元素，自然样式不生效。

2. HTML标签语法错误 #

第二个a标签的闭合标签写错了，应该是</a>，你写成了/a>，语法错误会导致浏览器解析异常，也会影响样式应用。

修正后的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:link {
    font-size: 20px; /* 补上单位，浏览器才能正确识别 */
    color: #93186F;
    font-weight: bold; /* 匹配期望的加粗效果 */
}
#primaryLink:visited {
    font-size: 20px;
    color: #77023F;
    font-weight: bold;
}

/* 次要链接样式：对应期望的斜体、不醒目效果 */
#secondaryLink:link {
    text-decoration: none;
    color: #666; /* 替换为深灰色，避免白色背景下链接不可见，可根据实际背景调整 */
    font-style: italic; /* 匹配期望的斜体效果 */
}
#secondaryLink:visited {
    text-decoration: none;
    color: #666;
    font-style: italic;
}

补充说明：你之前的CSS里font-size:20缺少单位（应为20px），浏览器可能无法正确识别；另外你期望次要链接是斜体，所以要在CSS里添加font-style: italic属性。

内容的提问来源于stack exchange，提问作者MosesSHTAR