如何在另一个“a”标记中使用“a”标记？[副本]

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>
  

在我的代码中，first href="http://example1.com"不工作。如何编辑代码？

谢谢

Answer 1

你不能。

HTML规范明确禁止它。

内容模型：透明，但不能有交互内容或元素子体。

如果您想要重叠链接（我真的不建议这样做，因为UI最多也会让人困惑），那么您有两个选择：

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