所以我正在尝试从Bulma自定义Hero组件。当我尝试将 CSS 选择器定位到其中的元素时，它似乎并不适用。测试时，我可以将font-size设置为 100pt 并color: red而没有效果。这是我的工作：
索引.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;
}
索引.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 上的。我已经尝试了许多不同的选择器，所以在这一点上，我想知道我是否犯了一些明显/明显的错误。
当我选择元素时，Chrome 开发者工具不会显示有关我的#titley样式的任何信息。
任何提示将不胜感激。
关闭#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元素。
大括号后面有一个分号，还找不到其他问题。 但由于谷歌没有显示它，所以应该是这样。