CSS样式未作用于网页p标签：仅当前页面失效求助

<br><br>
<a href="##" target="_blank">
  <h2>TITLE 2</h2></a>
<i>Published: ...</i> <br><br>
<b>Abstract</b><br>
...

``` 搭配的对应CSS文件（style.css）代码如下： ```css body { font-family: Arial, Helvetica, sans-serif; }

p {
text-align: justify;
margin-left: 5%;
margin-right: 5%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
color: white;
}

p a {
text-decoration: none;
color: darkslategrey;
}

p a:hover {
color: black;
}

但发现p标签的CSS样式完全未作用于该页面，而其他页面的p标签样式可正常生效，不知原因何在？

---

# 解决方案

### 核心原因：HTML结构违反规范
根据HTML标准，`<p>`标签属于短语内容容器，**不能包含`<h2>`这类块级元素**。浏览器在解析错误的HTML时会自动修正DOM结构：它会在遇到第一个`<h2>`时就提前闭合`<p>`标签，导致你写的所有内容都不在`<p>`容器内，自然无法应用`p`对应的CSS样式。

浏览器实际渲染后的DOM结构会变成这样：
```html
<p></p>
<a href="#" target="_blank">
  <h2>TITLE 1</h2>
</a>
<i>Published: ...</i> <br><br>
<b>Abstract</b><br>
...

原有的<p>被空闭合，后续内容脱离了p标签范围，样式自然失效。

修复步骤 #

1. 替换<p>为合法的块级容器
   把包裹内容的<p>标签换成<div>（或语义化的<section>），因为<div>可以合法包含块级元素：

   <div class="pub-content">
     <a href="#" target="_blank">
       <h2>TITLE 1</h2>
     </a>
     <i>Published: ...</i> <br><br>
     <b>Abstract</b><br>
     ...
     <br><br>
     <a href="##" target="_blank">
       <h2>TITLE 2</h2>
     </a>
     <i>Published: ...</i> <br><br>
     <b>Abstract</b><br>
     ...
   </div>
   

2. 修改CSS选择器匹配新容器
   将CSS中针对<p>的选择器替换为新的类选择器：

   .pub-content {
     text-align: justify;
     margin-left: 5%;
     margin-right: 5%;
   }
   
   .pub-content a {
     text-decoration: none;
     color: darkslategrey;
   }
   
   .pub-content a:hover {
     color: black;
   }
   

3. 优化废弃标签（可选）
   <center>标签已被HTML5废弃，建议用CSS实现标题居中：

   h1 {
     text-align: center;
   }
   

   对应修改HTML：

   <h1>Publications</h1>
   

---

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