能否用:visited伪类修改兄弟元素样式？JS实现方案咨询

为什么CSS方法无效 #

浏览器出于隐私保护目的，对:visited伪类的使用有严格限制：

• 仅允许修改少数不影响布局的属性（如color、background-color、border-color等）
• 无法通过:visited选择器定位兄弟元素、父元素或其他非链接本身的元素——这类操作可能泄露用户的浏览历史，因此被浏览器直接禁止。
  你尝试的两种SCSS写法都违反了上述限制，所以无法生效。

JavaScript实现方案 #

可以通过检测链接的访问状态，手动给目标元素添加类来实现样式修改：

HTML（保持原结构） #

<div class="container">
  <a href="https://www.google.com" class="link"></a>
  <div class="content">
    <h2 class="title">test</h2>
  </div>
</div>

JavaScript代码 #

const links = document.querySelectorAll('.link');

links.forEach(link => {
  // 创建隐藏的测试链接，用于对比颜色判断访问状态
  const testLink = document.createElement('a');
  testLink.href = link.href;
  testLink.style.visibility = 'hidden';
  testLink.style.position = 'absolute';
  document.body.appendChild(testLink);

  // 获取未访问状态的默认颜色与当前链接的实际颜色
  const unvisitedColor = window.getComputedStyle(testLink).color;
  const currentColor = window.getComputedStyle(link).color;

  // 颜色不同则说明链接已被访问，给父容器添加标记类
  if (currentColor !== unvisitedColor) {
    link.parentElement.classList.add('visited');
  }

  // 清理临时测试链接
  document.body.removeChild(testLink);
});

CSS代码（通过类控制样式） #

.container {
  /* 初始默认样式 */
}

// 链接已访问时的容器及子元素样式
.container.visited {
  background-color: red;
  .content .title {
    color: brown;
  }
}

注意事项 #

• 该方法依赖浏览器对:visited的颜色渲染差异，主流浏览器均能正常工作；
• 需要确保链接的:visited状态有默认颜色（比如浏览器自带的紫色），否则无法通过颜色对比判断访问状态。

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