如何在CSS中为<a>标签添加target、rel等HTML属性？

问题根源 #

你写的target和rel都属于 HTML 原生标签属性，不属于 CSS 支持的样式属性，CSS 的设计作用仅为控制页面的视觉表现、布局、动画等样式效果，没有能力给HTML标签设置原生属性，所以你把这两个配置写在CSS里浏览器会识别为未知属性，自然无法生效。

批量给所有a标签添加属性的实现方案 #

• 方案1：在模板/渲染层全局配置
  如果你用的是Vue、React等前端框架，或者PHP、Node.js等服务端渲染方案，可以直接在全局封装公共的链接组件、或者修改模板渲染的默认逻辑，所有生成的a标签自动携带对应属性，这是性能最好的实现方式。
• 方案2：用JavaScript批量注入属性
  如果没办法直接修改渲染逻辑，可以在前端用JS全局处理，示例代码如下：

  // 页面DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', () => {
    // 选中所有a标签
    const allLinks = document.querySelectorAll('a')
    allLinks.forEach(link => {
      // 可选：只给外部链接加属性，排除站内跳转，不需要可以删掉这个判断
      if (!link.href.startsWith(window.location.origin)) {
        link.setAttribute('target', '_blank')
        link.setAttribute('rel', 'noopener noreferrer')
      }
    })
  })
  

  注意：如果页面有动态插入的a标签（比如异步加载的内容、用户交互生成的元素），需要在动态内容插入后重新执行上述逻辑，或者在动态生成a标签时主动添加对应属性。

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