html - 为什么我只能内嵌这个元素的样式？在 styles.css 中设置它的样式不会做任何事情

Question

我正在尝试设置此表单的样式，但我只能内联完成。其他一切都工作正常，但我只能将这种特定形式设置为内联样式。 (如果相关，我也使用 xampp 和 php)。

.chat_container {
  display: none;
  box-shadow: -10px -10px 31px -10px rgb(0, 0, 0);
  position: fixed;
  bottom: 0px;
  right: 0vw;
  width: 17.1vw;
  background-color: rgba(9, 45, 79, 0.7);
  z-index: 9999999;
  border-top-left-radius: 10px;
  border-style: solid;
  border-color: orange;
  border-bottom-style: none;
  border-right-style: none;
}

<div class="chat_container" style="position: fixed;bottom: 0px;right: 0vw;width: 17.1vw;background-color: rgba(9, 45, 79,0.7);z-index: 9999999;border-top-left-radius: 10px; border-style: solid; border-color: orange; border-bottom-style: none; border-right-style: none;">

  <form name="form1" style="padding-left: 15px;padding-top: 15px;">
    Nickname: <input type="text" name="uname" style="padding-bottom: 10px;" /> <br />
    <br />

    <div id="chatlogs" style="color: orange; padding-left: 5px;">
      <p>Please wait...</p>
    </div>

    <textarea id="msg_area" name="msg" style="width: 90%;border-radius: 5px; border: none; padding-left: 10px; padding-top: 5px;"></textarea><br />
    <a href="#" onclick="submitChat()" id="chat_button" style="display:none;">Send</a><br />
  </form>

</div>

如果我删除 html 内联样式，整个元素将失去其样式。

Answer 1

删除 CSS 文件中的 CSS 属性 display: none

.chat_container {
  box-shadow: -10px -10px 31px -10px rgb(0, 0, 0);
  position: fixed;
  bottom: 0px;
  right: 0vw;
  width: 17.1vw;
  background-color: rgba(9, 45, 79, 0.7);
  z-index: 9999999;
  border-top-left-radius: 10px;
  border-style: solid;
  border-color: orange;
  border-bottom-style: none;
  border-right-style: none;
}

<div class="chat_container">

  <form name="form1" style="padding-left: 15px;padding-top: 15px;">
    Nickname: <input type="text" name="uname" style="padding-bottom: 10px;" /> <br />
    <br />

    <div id="chatlogs" style="color: orange; padding-left: 5px;">
      <p>Please wait...</p>
    </div>

    <textarea id="msg_area" name="msg" style="width: 90%;border-radius: 5px; border: none; padding-left: 10px; padding-top: 5px;"></textarea><br />
    <a href="#" onclick="submitChat()" id="chat_button" style="display:none;">Send</a><br />
  </form>

</div>