求助：页面未编写div代码却自动出现，添加后重复显示问题

核心原因 #

页面自动出现的div，几乎可以确定来自你引入的bullet-icon.css外部样式表。这个样式表大概率通过以下方式生成了额外元素：

• 包含了作用于全局div的样式，或是用伪元素（::before/::after）设置了块级显示规则，被浏览器渲染为可视元素；
• 文件中混入了动态插入DOM的脚本代码（虽不符合CSS规范，但不排除误操作导致）；
• 选择器意外匹配到了浏览器默认生成的隐藏元素并强制显示。

验证方法 #

1. 临时注释掉<link rel="stylesheet" href="bullet-icon.css">这一行，刷新页面看自动生成的div是否消失；
2. 打开bullet-icon.css文件，检查是否有全局div选择器、带content属性的伪元素样式，或是其他异常代码。

解决步骤 #

• 若确认是样式表问题：
  • 删除其中自动生成元素的代码；
  • 将全局div选择器改为带类名的限定选择器（比如.custom-div），避免影响全局元素；
• 若不需要这个样式表，直接删除引入它的<link>标签即可；
• 若要保留样式表且自定义div，给你的div添加专属类名，修改样式为：

  .my-custom-div {
      background-image: radial-gradient(red, pink);
      width: 500px;
      height: 300px;
  }
  

  手动添加div时使用该类：

  <div class="my-custom-div"></div>
  

补充说明 #

手动添加div后出现两个重复块，是因为你自己写的div加上样式表生成的div，都被全局div选择器设置了样式，所以呈现无间距的重复效果。

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