a:link, a:visited { color: rebeccapurple; font-weight: bold; } a:hover { color: hotpink; }

<think>我们正在讨论CSS中a标签（超链接）的不同状态样式设置。用户特别提到了link、visited、hover状态，并希望设置颜色（color）为rebeccapurple和hotpink，以及字体加粗（font-weight: bold）。 根据CSS规范，超链接有以下几个常见状态： 1. :link - 未访问的链接 2. :visited - 已访问的链接 3. :hover - 鼠标悬停在链接上 4. :active - 链接被点击的时刻 注意：为了样式正确生效，通常建议按照LVHA顺序（即:link, :visited, :hover, :active）来定义样式，以避免某些样式被覆盖。 用户要求： - 颜色：rebeccapurple（建议用于未访问链接）和hotpink（建议用于鼠标悬停状态），但用户没有明确指定每个状态的颜色，所以我们需要合理分配。 根据常见的做法，未访问和已访问链接通常使用相近的颜色，而悬停时改变颜色。但用户只提供了两种颜色，我们可以这样分配： - link: rebeccapurple - visited: 也可以使用rebeccapurple（或者另一种颜色，但用户只给了两种，这里我们可以让visited和link相同，或者使用hotpink？） 但是用户没有指定visited的颜色，所以我们可以自行设计。然而，用户明确提到了两种颜色：rebeccapurple和hotpink，并且要求设置hover状态。 因此，我建议： :link 和 :visited 使用rebeccapurple，而:hover使用hotpink。当然，也可以根据用户的具体需求调整。 另外，用户要求字体加粗（font-weight: bold）。我们可以将其应用于所有状态，或者仅应用于某些状态？用户没有明确，但通常我们希望在所有状态下保持一致的字体粗细，除非有特殊需求。这里我们可以将加粗应用于所有状态。 所以，CSS代码可以这样写： ```css a:link { color: rebeccapurple; font-weight: bold; } a:visited { color: rebeccapurple; /* 已访问链接也使用相同颜色，或者可以改为其他颜色，如hotpink？但用户只提到两种颜色，且通常visited和link颜色相同或相近 */ font-weight: bold; } a:hover { color: hotpink; font-weight: bold; } a:active { /* 用户没有提到active状态，但为了完整，我们可以设置一个颜色，比如使用hotpink或更深的颜色 */ color: hotpink; font-weight: bold; } ``` 但是，为了简化代码，我们可以将共同的样式（如font-weight: bold）合并到a选择器，然后单独设置颜色。但是注意，如果合并到a选择器，则会影响到所有状态，包括未定义的状态。所以我们可以这样： ```css a { font-weight: bold; /* 所有状态的链接都加粗 */ } a:link, a:visited { color: rebeccapurple; } a:hover, a:active { color: hotpink; } ``` 这样更简洁，且符合LVHA顺序（因为我们在后面定义了:hover和:active，所以当鼠标悬停和点击时，会覆盖前面的颜色）。 注意：如果用户希望visited状态和link状态颜色不同，那么我们可以分开设置。但用户没有明确，这里我们假设用户希望link和visited状态颜色相同。 因此，我提供上述代码作为解决方案。 另外，关于颜色值： - rebeccapurple 是一种深紫色，其十六进制值为 #663399。 - hotpink 是一种亮粉色，其十六进制值为 #FF69B4。 如果用户需要兼容不支持命名颜色的旧浏览器，可以使用十六进制值，但现代浏览器都支持这些命名颜色。 最后，我们还需要考虑用户是否希望在不同的状态下有其他样式变化（如下划线、背景等），但问题中只提到了颜色和加粗，所以我们只处理这两个属性。 现在，根据用户要求，生成相关问题： §§相关问题§§ 1. 如何设置超链接在不同状态下的下划线样式？ 2. 除了颜色和字体加粗，还有哪些常见的超链接样式设置？ 3. 如何移除超链接的默认下划线？ 4. 在CSS中，为什么建议按照LVHA顺序定义超链接样式？</think>### CSS超链接样式设置 在CSS中，`<a>`标签的不同状态可以通过伪类选择器设置样式。以下是针对您需求的样式设置方案： ```css /* 未访问链接 */ a:link { color: rebeccapurple; /* 深紫色 */ font-weight: bold; /* 加粗 */ text-decoration: none; /* 可选：移除下划线 */ } /* 已访问链接 */ a:visited { color: hotpink; /* 亮粉色 */ font-weight: bold; /* 加粗 */ } /* 鼠标悬停 */ a:hover { color: hotpink; /* 悬停时也使用亮粉色 */ font-weight: bold; /* 保持加粗 */ text-decoration: underline; /* 可选：添加下划线效果 */ } ``` #### 关键说明： 1. **状态顺序**：必须按照`:link` → `:visited` → `:hover` → `:active`的顺序定义，否则某些样式可能被覆盖[^1] 2. **颜色选择**： - `rebeccapurple`：深紫色（十六进制#663399） - `hotpink`：亮粉色（十六进制#FF69B4） 3. **字体加粗**：通过`font-weight: bold`实现 4. **最佳实践**： ```css /* 通用样式 */ a { transition: color 0.3s; /* 添加颜色过渡动画 */ } ``` #### 效果对比： | 状态 | 颜色 | 字体 | 典型效果 | |------------|---------------|----------|------------------------| | 正常链接 | rebeccapurple | 加粗 | <span style="color:#663399;font-weight:bold">示例文字</span> | | 已访问链接 | hotpink | 加粗 | <span style="color:#FF69B4;font-weight:bold">示例文字</span> | | 鼠标悬停 | hotpink | 加粗 | 带下划线效果 | > ⚠️ 注意：某些浏览器出于隐私考虑，会限制`:visited`的样式修改，通常只允许修改颜色属性[^2]。