为什么相同class的两个HTML元素中p标签的CSS样式未生效？

问题原因 #

你的代码问题源于HTML标签嵌套不符合官方规范：

• <p> 是段落标签，HTML规范明确禁止在 <p> 内部嵌套任何块级元素（<h1>~<h6>、<div>、<p>等都属于块级元素）
• 浏览器解析代码时，遇到<p class="city">后紧接着的<h2>标签，会自动提前闭合<p>，最终实际渲染的DOM结构如下：

<p class="city"></p>
<h2>Germany</h2>
<p></p>

.city样式其实已经正确生效在空的<p>标签上，只是该标签没有内容，你看不到样式效果；而你原本放在p内部的<h2>被解析成了p的同级元素，自然不会应用p的.city样式。

修复方案 #

根据你的使用场景选一种即可：

• 如果你需要保留h2标题，把外层的p标签替换为支持嵌套块级元素的div标签：

<div class="city">
  <h2>Germany</h2>
</div>

• 如果你不需要h2标题，直接把内容放在p标签内：

<p class="city">Germany</p>

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