无法识别 ID 选择器

Question

我知道有几十个类似的问题，其中一些帮助我走到了这一步，但我看不出这个错误的任何押韵或原因。

我已经用 id HeaderGradient标记了一个图像，我正在尝试在 css 文件中设置它的大小，但它不起作用。当我检查Firefox中的元素时，没有提到我的css文件。我正在使用 Bootstrap 框架。我做错了什么？

body {    	
  #HeaderGradient {
    width: 80%;
    height: 141px; 
  }
}

<div class="row">
  <div class="col-sm-4"></div>
    <div class="col-sm-4">
      <div class="panel-heading">
        <img class="img-responsive" src="images/logo.png" id="Logo" alt="EP Logo">
        <img class="img-responsive" src="images/header_gradient.png" id="HeaderGradient" alt="Gradient Image">
      </div> 
    </div>
  <div class="col-sm-4"></div>
</div>

Answer 1

您为此使用了无效的 CSS 代码，它应该是

#HeaderGradient {
   width: 80%;
   height: 141px; 
}

#HeaderGradient {
  width: 80%;
  height: 141px; 
}

<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4">
    <div class="panel-heading">
      <img class="img-responsive" src="images/logo.png" id="Logo" alt="EP Logo">
      <img class="img-responsive" src="images/header_gradient.png" id="HeaderGradient" alt="Gradient Image">
    </div> 
  </div>
  <div class="col-sm-4"></div>
</div>

Answer 2

这不是有效的 CSS 语法 按如下方式更新语法以body标记内获取#HeaderGradient。

body #HeaderGradient{
   width: 80%;
   height: 141px; 
}

Answer 3

ID 选择器放在错误的位置。而不是：

body {
    #HeaderGradient{
      ....
    }
}

将选择器移到外面：

body {
    ....
}
#HeaderGradient{
  ....
}

如果你想使用这种CSS语法，你需要使用CSS预处理器。查看少或萨斯