VS Code Live Server自动生成额外<div>问题咨询及无CSS解决方案需求

问题现象 #

我在使用VS Code的Live Server扩展开发时遇到异常：HTML代码里只写了3个<div>，但通过Live Server打开页面后，页面显示了5个带灰色背景和黑色边框的<div>。本地浏览器直接打开HTML文件时仅显示3个目标元素，而Live Server的审查元素界面能看到额外生成的2个<div>。

本地浏览器输出截图：
Live Server审查代码截图：

我的HTML代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
</head>
<style>
  div {
    height: 100px;
    width: 400px;
    background-color: grey;
    border: 2px solid black;
  }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

</html>

问题原因 #

这2个额外的<div>是Live Server扩展为实现实时重载功能自动注入的辅助元素。Live Server需要在页面中添加这类元素来监听本地文件的修改，进而触发页面自动刷新。这些元素默认是隐藏状态，但你的CSS规则div { ... }是全局选中所有<div>标签，覆盖了它们原本的隐藏样式，导致这两个辅助元素被渲染显示出来。

不使用CSS选择器的解决方法 #

• 切换本地服务工具：放弃使用Live Server扩展，改用原生命令行工具启动本地服务，比如Node.js的http-server：
  1. 先全局安装：npm install -g http-server
  2. 进入项目目录后执行：http-server，然后访问提示的本地地址即可，这种方式不会向页面注入额外元素。
• 修改Live Server配置：在VS Code的设置中搜索Live Server，找到Settings: Inject Script选项并关闭，这样Live Server就不会向页面注入辅助元素，也就不会出现额外的<div>了。

为什么CSS选择器能解决问题 #

当你使用特定CSS选择器（比如给自己的<div>添加类名.custom-div，然后用.custom-div { ... }代替全局div选择器）时，CSS规则只会匹配你自己创建的带指定类名的<div>，而Live Server注入的辅助元素带有专属的类名或ID（比如__live-server-*前缀），不会被这个选择器选中，因此不会被应用样式，自然也就不会显示出来。

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