CSS 选择器未应用于 Bulma Hero 中的内部元素

Question

所以我正在尝试自定义 Bulma 的 Hero 组件。当我尝试将 CSS select 或其中的某个元素作为目标时，它似乎并不适用。测试时，我可以将 font-size 设置为 100pt，将 color: red 设置为无效。这是我的作品：

index.css

#headline-container {
    border-bottom: 2px solid #00aff4;
    background: radial-gradient(ellipse at center, rgb(60, 197, 255) 0%, rgb(0, 181, 255) 100%);
};

#titley {
    font-size: 28pt;
    font-weight: 300;
    color: red;
    font-family: "Roboto Condensed", Arial Narrow, Arial, sans-serif;
    text-align: right;
    vertical-align: middle;
}

index.html

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" integrity="sha256-zKA1Bf41O96+gJSlkn/Bh2HATW/OhwkApPlYTp3B5O8=" crossorigin="anonymous" />
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="hero is-large is-info" id="headline-container">
    <div class="hero-body">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div id="titley">Here's my big fancy headline.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

内部 div 上的 #titley 标签没有任何效果，但这不仅仅是 ID。我已经尝试了很多不同的 select 或，所以现在我想知道我是否犯了一些 glaring/obvious 错误。

当我 select 元素时，

Chrome 开发人员工具不显示任何关于我的 #titley 样式的信息。

如有任何提示，我们将不胜感激。

Answer 1

大括号后面有一个分号，目前还找不到其他问题。但由于 Google 没有显示，所以应该是这样。

Answer 2

关闭时有分号#headline-container。
试试这个 CSS:

#headline-container {
  border-bottom: 2px solid #00aff4;
  background: radial-gradient(ellipse at center, rgb(60, 197, 255) 0%, rgb(0, 181, 255) 100%);
}

#titley {
  font-size: 28pt;
  font-weight: 300;
  color: red;
  font-family: "Roboto Condensed", Arial Narrow, Arial, sans-serif;
  text-align: right;
  vertical-align: middle;
}

此外，我建议使用 container class 而不是 level class。 class 级别最适合 nav 元素，而不是 div 元素。

CSS 选择器未应用于 Bulma Hero 中的内部元素

CSS selector isn't applying to an inner element in Bulma Hero

html

css

bulma