在 express.js 中使用 CSS 的问题

Question

我正在接触网络开发的世界。我正在学习如何使用 express.js 创建后端。然而这些天我运行遇到了 CSS 的问题：特别是一些 CSS 选择器没有被考虑，例如在下面的代码中 h1 选择器工作但 #page-container 选择器不工作. 感谢任何能够帮助我的人

layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/index.css')
    link(rel="preconnect" href="https://fonts.gstatic.com")
    link(href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet")
  body
    block content

index.pug

extends layout
    
block content
  #page-container
    #title-container
      h1 LOGIN
    #center-container
      #thumb-container
        img(src='#')
        #button-container
          button(src='#')

index.css


h1 {
    font-family: Arvo, Georgia, "Times New Roman", Times, serif;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
};

#page-container {
    max-width: 992px;
    color: lightgray;
    margin: 10px auto;
    height: 100%;
};

根据要求，我正在通过添加浏览器呈现的HTML来编辑问题

已渲染HTML

<html>
   <head>
      <title>Express</title>
      <link rel="stylesheet" href="/stylesheets/index.css">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
   </head>
   <body data-new-gr-c-s-check-loaded="14.993.0" data-gr-ext-installed="">
      <div id="page-container">
         <div id="title-container">
            <h1>LOGIN</h1>
         </div>
         <div id="center-container">
            <div id="thumb-container">
               <img src="#">
               <div id="button-container"><button src="#"></button></div>
            </div>
         </div>
      </div>
   </body>
</html>

Answer 1

这是一个打字错误，但我正在回答，所以 OP 可以看到。

您的 CSS 规则后有 ;。删除那些：

h1 {
  font-family: Arvo, Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
}

#page-container {
  max-width: 992px;
  color: lightgray;
  margin: 10px auto;
  height: 100%;
}

<div id="page-container">
  <div id="title-container">
    <h1>LOGIN</h1>
  </div>
  <div id="center-container">
    <div id="thumb-container">
      <img src="#">
      <div id="button-container"><button src="#"></button></div>
    </div>
  </div>
</div>

在 express.js 中使用 CSS 的问题

Issues using CSS in express.js

javascript

css

express

pug