Question

.myclass {
width:25%;
height:50px;
background:#888;
display:inline-block;
}
a {
color:#fff;
}

<a href="http://example1.com">
  <div class="myclass">
    <img src="" />
  <a href="http://example2.com">link</a>
  </div>
</a>



<a href="http://example1.com">
  <div class="myclass">
    <img src="" />
  <a href="http://example2.com">link</a>
  </div>
</a>


<a href="http://example1.com">
  <div class="myclass">
    <img src="" />
  <a href="http://example2.com">link</a>
  </div>
</a>

如何在另一个“ a”标签内使用“ a”标签？

在我的代码中，第一个href =“ http://example1.com”无法正常工作。如何编辑我的代码？

谢谢

Answer 1

不能。

the HTML specification明确禁止。

内容模型：透明，但不得包含交互内容或元素后代。

如果您想要重叠的链接（并且我真的不建议这样做，因为UI充其量是令人困惑的），那么您有两种选择：

不要嵌套。使用CSS使它们重叠（例如负边距）
使用JavaScript（点击事件监听器）来处理其中的一种互动（请注意，这会产生更多的可访问性问题，例如，当用户无法操作鼠标时）

如何在另一个“ a”标签内使用“ a”标签？

1 个答案: