为何在<p>内插入<ul>/<ol>后，<p>被拆分为三个元素？

为什么会出现三个独立的<p>元素？ #

HTML规范明确规定，<p>是文本级块容器，只能包含行内元素（比如<span>、纯文本），不能嵌套<ul>、<ol>这类块级元素。当浏览器解析到<p>内部的<ul>时，会自动闭合前面的<p>，并在<ul>结束后自动补一个空的<p>标签。最终实际渲染的DOM结构会变成：

<p>
    <span>Some texts in here?</span>
</p>
<ul>
    <li>And Some here</li>
    <li>Same here</li>
    <li>Here too</li>
</ul>
<p></p>

这就是你能通过:nth-child()选中三个<p>、样式会应用到多个元素的核心原因。

为什么<ul>无法继承<p>的样式？ #

大部分CSS属性（比如width、padding、background-color）默认是不继承的，只有文本相关属性（如color、font-family）会自动继承父元素样式。<ul>作为独立的块级元素，自然不会继承<p>的非继承属性。

解决方案 #

1. 修正HTML结构 #

把<p>替换成可以嵌套块级元素的容器，比如<div>、<section>：

<div class="prompt-box">
    <span>Some texts in here?</span>
    <ul>
        <li>And Some here</li>
        <li>Same here</li>
        <li>Here too</li>
    </ul>
</div>

2. 调整CSS样式 #

根据需求选择以下两种方案：

方案一：整体容器圆角（简洁版）

给外层容器设置圆角，通过overflow:hidden让内部元素的边角被裁切，保持整体样式统一：

.prompt-box {
    width: 100%;
    background-color: var(--prompt-back);
    border-radius: 10px;
    overflow: hidden;
}

.prompt-box > span {
    display: block;
    padding: 0 10px;
    color: var(--foregroundColor);
    font-size: 15px;
    font-weight: bold;
}

.prompt-box ul {
    margin: 0;
    padding: 0 10px;
    color: var(--foregroundColor);
    font-size: 13px;
    background-color: var(--prompt-back);
    list-style-position: inside; /* 可选，让列表项和容器对齐 */
}

方案二：拆分上下圆角（还原原需求）

把标题和列表拆成两个独立块，分别设置上下圆角：

<div class="prompt-title">
    <span>Some texts in here?</span>
</div>
<ul class="prompt-list">
    <li>And Some here</li>
    <li>Same here</li>
    <li>Here too</li>
</ul>

.prompt-title {
    width: 100%;
    padding: 0 10px;
    background-color: var(--prompt-back);
    color: var(--foregroundColor);
    font-size: 15px;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}

.prompt-list {
    width: 100%;
    margin: 0;
    padding: 0 10px;
    background-color: var(--prompt-back);
    color: var(--foregroundColor);
    font-size: 13px;
    border-radius: 0 0 10px 10px;
}

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