Question

因此，我尝试自定义布尔玛的Hero组件。当我尝试将CSS选择器定位到其中的某个元素时，它似乎没有应用。测试时，我可以将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>

内部#titley上的div标记无效，但这不仅仅具有ID。我尝试了许多不同的选择器，所以在这一点上，我想知道我是否在犯一些明显的/明显的错误。

选择元素后，Chrome开发者工具不会显示有关我的#titley样式的任何信息。

任何提示将不胜感激。

Answer 1

在关闭#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类而不是level类。级别类最适合使用nav元素，而不是div元素。

Answer 2

花括号后面有一个分号，找不到其他问题了。但是，由于Google没有显示它，应该就是它。

CSS选择器不适用于Bulma Hero中的内部元素

2 个答案: