如何不修改全局CSS，使指定div及其子元素隔离全局样式？

你遇到的核心问题有两个：一是全局样式里的!important规则优先级太高，普通重置和自定义样式压不住；二是all: unset需要正确作用到目标容器的所有内部元素，同时还要补回元素的默认行为（比如段落的块级显示）。

具体实现步骤 #

• 在自定义的<style>标签里，给#custom-styles及其所有子元素应用all: unset，同时加!important确保能覆盖全局强制样式
• 恢复元素的默认显示行为，比如让<p>保持块级，避免重置后变成行内元素导致布局混乱
• 给自定义区域内的元素写样式时，用#custom-styles作为前缀，确保优先级足够

修改后的完整代码 #

<style>
/* sitewide styles */
*,
::before,
::after {
    margin: 0.5em;
    padding: 0.5em;
    border: none;
    box-sizing: inherit;
    font-family: 'Arial';
}
p {color: red !important}
</style>
<p>
This should be red with all the default styles
</p>
<div id='custom-styles'>
<style>
/* 重置自定义区域的所有样式，覆盖全局 */
#custom-styles, #custom-styles * {
    all: unset !important;
}
/* 恢复元素默认显示属性，可按需添加其他元素规则 */
#custom-styles p {
    display: block;
}
/* 自定义样式，带容器前缀确保优先级 */
#custom-styles p {
    color: green;
    margin: 0.2em 0;
    font-family: 'Helvetica';
}
</style>
<p>
I want this (and any other element within this div) to not be red and not have any default styles - it should only have the styles inside the second style tag (and, for example, be green)
</p>
</div>

关键说明 #

1. all: unset !important的必要性：全局样式里的p {color: red !important}用了强制优先级，只有同样带!important的重置规则才能覆盖它，不然内部文字还是会显示红色。
2. 恢复默认display属性：all: unset会重置元素所有样式（包括浏览器默认的display属性），比如<p>本来是块级元素，重置后会变成行内，所以需要手动指定display: block，其他元素如div、ul等也要按需添加类似规则。
3. 自定义样式的优先级：用#custom-styles p这种带容器ID的选择器，优先级远高于单独的p选择器，即使不用!important也能生效（如果全局有更极端的强制样式，可再加!important）。

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