43

我了解到嵌套锚标记不是符合标准的 HTML。

从 W3：

A 元素定义的链接和锚点不得嵌套；A 元素不得包含任何其他 A 元素。

由于 DTD 将 LINK 元素定义为空，因此 LINK 元素也不能嵌套。

与简单地嵌套锚点相比，在这个问题的选定答案中建议的替代方案似乎更有可能产生意想不到的行为！

仅仅为了在 JS 中重定向页面而制作 onclick 事件处理程序似乎也有点矫枉过正。更不用说使用脚本解决方案会给禁用脚本的用户带来问题。

编辑

有趣的是，我正在制作一个小提琴来演示，我忽略了 chrome 实际上是这样重组 DOM 的：

<div id="container">

    <a href="http://yahoo.com"></a>
    <div class="parent">
        <a href="http://yahoo.com">Parent Element</a>
        <a href="http://google.com">
            <div class="child">Child Element</div>
        </a>
        <a href="http://bing.com">
            <div class="child">Other Child</div>
        </a>
    </div>

</div>

我忽略了这一点，因为我看到悬停工作并将鼠标放在文本上。现在知道这一点并不一定会改变我的问题，但它确实说明它甚至不像我想的那样工作。

4

4 回答 4

49

请记住，锚不仅仅是一个链接，它也是一个可以链接的东西。（尽管前者的使用比后者更常见。）引用W3C（旧的，但相关的）：

锚点是一段标记超文本链接开始和/或结束的文本。

为此，不要将锚点视为链接。将其视为文档中的一个点，该点连接到（和/或来自）另一个点（在同一个文档或另一个文档中，没有区别）。一些非物理空间中的两个点通过非物理线程连接。

鉴于此，锚不应该包含很多内容。如果它包含很多内容，它就不再是一个“点”，而是开始成为一个“区域”。例如，想象一个锚点，它在渲染时占用的空间超过了浏览器一次可以显示的空间。如果有东西链接到那个锚点，它应该去哪里？开始？中间？结尾？（直觉上你可能会想到开始，但你明白了。）

此外，锚点绝对不应该包含其他锚点。非物理点之间的非物理连接可能会变得不明确。子锚点连接到另一个点，还是父锚点连接到另一个点？在大多数情况下，这可能不会造成什么大问题，因为当今绝大多数锚点都是从锚点到另一个文档的单向链接。但是锚点的目的不仅仅是指向另一个文档的单向链接，因此定义继续体现了这一目的。

于 2013-09-06T21:53:47.203 回答
9

规范<a>的内容模型为：

透明，但不能有交互式内容后代。

所以规范实际上比你说的要复杂。这也适用于<button>——基本上你不能在链接内有工作链接或在按钮内有按钮。

不幸的是，我对你的问题没有一个强有力的答案——我只能推测。一个明显的原因是它导致的模棱两可（例如，当单击内部锚点时应该遵循哪个锚点？）

这不仅会造成功能上的歧义，还会造成语义上的歧义。的内容<a>是其超链接的标签。那么这是否意味着内部超链接是外部链接内容标签的一部分？

于 2013-09-06T21:56:41.783 回答
3

虽然社区的其他好人给出了很好的答案，但我想通过举例说明如何模仿嵌套的锚标记而不实际将它们嵌套在标记中，通过使它们在视觉上看起来好像一个人在另一个人的区域内：

.parent{
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid salmon;
}

.parent .main-link{
  display: block;
  margin-bottom: 2em;
}

/* 
  expands the clickable area of the main link 
  to fill the parent container, because it's the nearest
  ancestor with "position:relative"
*/
.parent .main-link::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parent a:hover{
  color: green;
}

/* bring other links "forward" to make them clickable */
.parent .secondary-link{
  position: relative;
  z-index: 1;
}
<div class='parent'>
  <a href='#111' class='main-link'>main link, full area</a>
  <a href='#222'class='secondary-link'>secondary link</a>
</div>

于 2020-05-10T15:42:01.717 回答
1

由于模棱两可，标准不推荐使用锚嵌套（尽管我测试过的所有浏览器似乎都指向最里面的点击目标）。

说大部分应该指向某个页面，而在这一部分中，一小部分应该指向其他地方是不合逻辑的。我仍然需要查看这种行为的任何用例。随着可用脚本语言的发展，这种迭代或继承可以发挥作用（例如 div 上的 javascript 点击事件），但代码永远不会想要指向某个 URL，然后再指向另一个（父锚点的 href）。

编辑：看看你在你的问题中引用的问题，堆叠2个指向完全相同href的锚是完全没用的。只需删除嵌套的，一切都会好起来的。如果是因为你做了一个 CSS 规则，比如a a{color:red;}使用跨度！或者甚至是一个 div ，display:inline但是拜托，拜托，一个锚应该去某个地方，不应该仅仅用于造型目的或其他东西。

于 2013-09-06T21:47:15.693 回答