CSS类选择器不起作用

Question

我正在尝试使用HTML和CSS制作自定义提醒框。容器的ID为“xAlert”，其中包含3个div：一个用于标题，一个用于描述，一个用于操作（如“确定”或“取消”）。到目前为止，这是我的代码：

#xAlert{
  width:368px; /* 400-16*2 */
  max-height:200px;
  left:50%;
  margin-left:-200px;
  position:absolute;
  overflow:auto;
  border:1px solid black;
  padding:16px;
}

.alertTitle{
  font-size:20px;
}

  <div id="xAlert">
    
    <div class="alertTitle">
      Alert Title
    </div>
    
    <div class="alert_description">
      Alert Description
    </div>
    
    <div class="alert_actions">
      Alert Actions
    </div>
    
  </div>

如您所见，警报标题（.alertTitle）的字体大小不是20px。我尝试使用内联CSS并且它有效，我删除了#xAlert的CSS并且它有效，但为什么这不起作用？

Answer 1

通过a validator运行您的代码，其中包含：

  

第9行第2列的词汇错误。遇到：“\ u007f”（127），之后：“”} .alertTitle {font-size：20px; }

在第一个}之后有一个不可见的字符，它被视为以下选择器的（无效）部分。删除它。