为何嵌套div中的子div方块不显示？仅文字可见问题排查

1. 修复.foreground方块样式不显示的问题 #

你的CSS代码里，每个选择器闭合大括号后多了多余的分号（};），这会导致CSS解析器报错，进而让.foreground的样式无法生效。只要把这些多余的分号去掉即可。

修正后的完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>
        <h2>Welcome</h2>
        <div class="background">
          <div class="foreground">foreground</div>
        </div>
    <style>
      .background {
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .foreground {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </body>
</html>

2. 解决元素未设置拖拽属性却可拖拽的问题 #

浏览器默认允许选中的文本、图片等元素被拖拽，这是原生行为，不是异常。要禁用这个效果，有两种常用方法：

• 方法一：给元素添加属性
  给需要禁止拖拽的元素加上draggable="false"属性，示例：

  <div class="foreground" draggable="false">foreground</div>
  

• 方法二：用CSS全局禁用
  如果想让页面所有元素都不能被拖拽，可以添加以下CSS规则：

  * {
    user-select: none; /* 禁止文本选中 */
    -webkit-user-drag: none; /* 禁用webkit内核浏览器的元素拖拽 */
    draggable: false; /* 全局设置不可拖拽 */
  }
  

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