CSS:内联样式应用于 <fieldset> 但是当我将相同的代码写入外部 css 并通过 id 引用时,没有应用任何样式

CSS: inline style gets applied to <fieldset> but when I write the same code to external css and reference by id no style applied

https://jsfiddle.net/tdyd5naw/

css 文件已正确链接,因为页眉和页脚 div 已设置样式。我认为这是选择器的问题,但在尝试了很多与 W3C 相关的选项后,我不知所措。

这里是相关的html

<body>

   <div class = "header"><h1>Library</h1>
   </div>

   <form action = "newUser.php" method = "POST">


      <fieldset  id="newAc">
         <legend>New Accouunt Details</legend>
         Choose Username: <br>
         <input type = "text" name = "uname"/><br>
         Choose Password: <br>
         <input type = "password" name = "pass1"/><br>
         Re-Enter Password: <br>
         <input type = "password" name = "pass2"/><br>
      </fieldset>

      <fieldset id = "personalInfo">
         <legend>Personal Info</legend>
         First Name: <br>
         <input type = "text" name = "fname"/><br>
         Surname: <br>
         <input type = "text" name = "sname"/><br>
         Address Line 1: <br>
         <input type = "text" name = "addr1"/><br>
         Address Line 2: <br>
         <input type = "text" name = "addr2"/><br>
         City: <br>
         <input type = "text" name = "city"/><br>
         Telephone Home: <br>
         <input type = "text" name = "hphone"/><br>
         Telephone Mobile: <br>
         <input type = "text" name = "mphone"/><br>
      </fieldset>

      <input type = "submit" value = "Register"/><br>

   </form>

   <div class = "footer">
   </div>

</body>

这里是对应的CSS

#newAc {
   position:relative; 
   disblay:block; 
   float:left; 
   top: 100px; 
}

#personalInfo{
   position: relative;
   display: block;
   float: left;
   top: 100px
}

你正在做 wrong.change 从 feildset #newAc 到 feildset#newAc 或 #newAc 区别在于 1. feildset #newAc 是你正在寻找一个带有#newAc 的元素 字段集
2. feildset#newAc 正在寻找 feildset 中的元素 ID #newAc
3. #newAc 正在寻找具有 id #newAc

的元素

#newAc {
   position:relative; 
   disblay:block; 
   float:left; 
   top: 100px; 
}

#personalInfo{
   position: relative;
   display: block;
   float: left;
   top: 100px
}
 <fieldset  id="newAc">
         <legend>New Accouunt Details</legend>
         Choose Username: <br>
         <input type = "text" name = "uname"/><br>
         Choose Password: <br>
         <input type = "password" name = "pass1"/><br>
         Re-Enter Password: <br>
         <input type = "password" name = "pass2"/><br>
      </fieldset>

      <fieldset id = "personalInfo">
         <legend>Personal Info</legend>
         First Name: <br>
         <input type = "text" name = "fname"/><br>
         Surname: <br>
         <input type = "text" name = "sname"/><br>
         Address Line 1: <br>
         <input type = "text" name = "addr1"/><br>
         Address Line 2: <br>
         <input type = "text" name = "addr2"/><br>
         City: <br>
         <input type = "text" name = "city"/><br>
         Telephone Home: <br>
         <input type = "text" name = "hphone"/><br>
         Telephone Mobile: <br>
         <input type = "text" name = "mphone"/><br>
      </fieldset>