如何按2019标准将CSS Grid元素设置为超链接？

嘿，针对你想把Grid布局里的.item1转为超链接的需求，我推荐两种符合现代Web标准（包括2019年规范）的方案，其中第一种是最优解：

方案1：直接将<div>替换为<a>标签（语义化首选） #

HTML5早就允许<a>标签作为块级元素使用，直接替换原来的<div>是最符合语义的做法——超链接本来就应该用<a>元素，这对屏幕阅读器和SEO都更友好，完全贴合2019年的Web标准。

修改后的代码示例： #

HTML部分：

<div class="wrapper">
  <a class="item1" href="你的目标链接地址">
    <span>TAG</span>
    <span class="sbp-title light-font">Read More</span>
  </a>
</div>

CSS部分（微调默认样式即可）：

.item1 { 
  grid-row: 1 / 3; 
  grid-column: 1/7; 
  height: 700px; 
  display: flex; 
  justify-content: flex-end; 
  flex-direction: column; 
  background-image: url("/Cms/ea8d405c-d794-4616-9b16-c921a76c43a2.jpg");
  /* 去掉a标签默认的下划线和颜色 */
  text-decoration: none;
  color: inherit;
  /* 确保a是块级（Grid容器内元素默认已为块级，此属性可选） */
  display: block;
}

注意：你原来代码里给<span class="sbp-title">加href="#"是无效的——href属性只能用在<a>标签上，所以把整个区域的链接放到外层<a>上就可以了。

方案2：嵌套<a>标签（仅特殊场景使用） #

如果因为某些限制无法替换<div>（比如内部有其他独立交互元素，你的场景里没有这种情况），可以在.item1内部嵌套一个占满整个容器的<a>标签：

代码示例： #

HTML部分：

<div class="wrapper">
  <div class="item1">
    <a href="你的目标链接地址" class="full-link"></a>
    <span>TAG</span>
    <span class="sbp-title light-font">Read More</span>
  </div>
</div>

CSS部分：

.item1 { 
  grid-row: 1 / 3; 
  grid-column: 1/7; 
  height: 700px; 
  display: flex; 
  justify-content: flex-end; 
  flex-direction: column; 
  background-image: url("/Cms/ea8d405c-d794-4616-9b16-c921a76c43a2.jpg");
  /* 开启相对定位，让内部a可以绝对定位 */
  position: relative;
}

.full-link {
  /* 占满整个.item1容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

这种方法虽然可行，但语义性远不如方案1，还需要额外的CSS定位，只推荐在无法替换<div>的特殊情况下使用。

总结 #

优先选择方案1，它完全符合2019年的HTML和CSS标准，语义清晰、实现简单，是处理这类需求的最佳实践。

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