这是一个关于HTML的CSS问题

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            margin:10px;
        }
       #bigImg h1{
        color:red;
                  }
  </style>
</head>
<body>

   <!--  <div id="  bigImg">
           <div style="background:red;width:100px;height:100px">11</div>
            <div style="background:black;width:100px;height:100px">2</div> 
            <div style="background:green;width:100px;height:100px">3</div>
        </div>
  -->

        <h1  id="bigImg">1</h1>


</body>

</html>

```h1的内容并没有变成红色，求解！

"#bigImg"和"h1"之间应该用逗号隔开，或者将"h1"写在"#bigImg"之前。

#bigImg,h1{
        color:red;
                  }

h1#bigImg{
        color:red;
                  }

这两种写法都是可以的，div、h、p标签在写标签选择器时都应该使用逗号隔开它们。

你把id="bigImg"的div都注释了，上边肯定获取不到，把#bigImg h1{ color:red;}改成h1{ color:red;}就行了。

直接在元素上加样式即可：

  <h1  id="bigImg" style="color:red">1</h1>

或者去掉样式定义的 h1（导致样式无效的根源），直接用 id 定位器，：

 #bigImg {
        color:red;
                  }

w3c 在线测试结果：
图片说明

你这个id选择器（bigImg）重复了,只需要h1标签中定义各种样式即可