如何仅为首个<iframe>的body标签应用CSS样式？

方法一：调整Stylus应用范围（最简单） #

打开Stylus中你创建的这个样式的编辑页面，找到「应用到」的设置选项，选择仅限顶级页面。这样样式就不会注入到页面内的iframe中，从根源上避免多个body叠加蒙版的问题。

方法二：修改CSS代码（适配特殊场景） #

如果你的需求必须让样式对部分iframe生效，或者无法调整Stylus设置，可以修改代码，确保只给顶级文档的body添加蒙版，同时优化蒙版实现逻辑（原来的超大outline写法过于hack，容易出问题）：

html > body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999999;
    pointer-events: none; /* 关键：避免蒙版挡住页面交互 */
}

代码说明：

• html > body：精准定位顶级文档的body元素，排除iframe内的body（iframe的body属于独立文档，不在当前顶级html的子元素链中）
• 替换超大outline为100vw/100vh的背景层：写法更规范，不会出现定位偏移或溢出问题
• pointer-events: none：必须添加，否则蒙版层会拦截页面的点击、输入等交互操作

内容的提问来源于stack exchange，提问作者Marcelo Figueiredo Alves