是代码编辑器故障还是代码问题？nav内a标签为何继承p标签字体大小

问题原因 #

你在导航栏内写的p标签没有正确闭合，原代码中写的是<p>This is the navigation<p>，第二个标签缺少斜杠，属于新的p元素开始标签，而非结束标签。

浏览器的HTML解析器有自动修复错误标签的规则：

• 遇到未闭合的p标签，且后续出现新的p开始标签时，会先自动闭合上一个未闭合的p元素，再解析新的p标签
• 后续的a元素属于行内内容，符合p元素的内容规范，会被自动归入当前未闭合的p元素内，直到解析到</nav>标签时，才会自动闭合这个多余的p元素

这就是你在DevTools中看到所有a标签被嵌套在额外p标签内的原因，这些a标签继承了你全局给p设置的22px字体大小，覆盖了nav的18px设置。

修复方案 #

将nav内的p标签正确闭合即可，修改后的HTML代码如下：

<nav>
  <p>This is the navigation</p>
  <a href="blog.html">Blog</a>
  <a href="#">Challenges</a>
  <a href="#">Flexbox</a>
  <a href="#">CSS Grid</a>
</nav>

修复后浏览器不会再自动生成额外的p元素，a元素会直接作为nav的子元素，继承nav的18px字体大小，符合你的预期。

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