a标签嵌套a标签在实际项目开发中遇到的坑

大家都知道HTML的嵌套规范，其中一个规范是块元素嵌套行内元素，块元素嵌套块元素，行内元素嵌套行内元素，行内元素不能嵌套块元素。

其中需要注意的是行内元素嵌套行内元素，a标签虽然是行内元素，但是a标签是不能嵌套a标签的，以前也没注意，结果不小心用了a标签嵌套a标签以后出现了以下的一个问题。

我想把二级显示变成三级显示，如下图

红色框部分是我增加三级显示的html代码

审查元素发现：我新增加的那个div（上图红色框的部分）莫名会增加一个a元素，这个增加的a元素是我新增加的div的父元素

这始终另我百思不得其解，后来和另外一个同事讨论测试以后发现是a标签嵌套a标签导致的。

解决方法：把下面红色框代码的父元素，也就是a标签，换成其它标签即可，比如div

注：P标签也是不能嵌套P标签的

至于为什么a标签不能嵌套a标签，网上的说法是：浏览器会自动添加结束符号，比如

你这样嵌套：<a href="www.baidu.com">谷歌<a href="www.weather.com.cn">中国天气网</a></a>

浏览器解析：<a href="www.baidu.com">谷歌</a><a href="www.weather.com.cn">中国天气网</a>

如果代码结构复杂，可能还会导致html层级错乱。

这里面还有一些平常可能不太清楚或者不知道的元素嵌套：http://blog.sina.com.cn/s/blog_12beb07f80102vfab.html