CSS中段落嵌套列表为何渲染异常？求解析内在逻辑

会被作为独立的块级元素放在

外面，所以它的黄色背景正常生效；

• 剩下的“Last line.”不会被包含在原来的

  里，也不会继承任何背景样式，最终呈现无背景的状态。

浏览器实际解析后的DOM结构大致如下：

<p style="background-color:red">
  First line.
</p>
<ul style="background-color:yellow">
  <li> Item one </li>
  <li> Item two </li>
</ul>
Last line.

如果想实现“列表和文本处于同一个带背景的容器内”的效果，应该用

<div style="background-color:red">
  First line.
  <ul style="background-color:yellow">
    <li> Item one </li>
    <li> Item two </li>
  </ul>
  Last line.
</div>