在express.js中使用CSS的问题

debugcn 发表于 Dev

马克·加托

我正在与Web开发领域打交道。我正在学习如何使用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>

毁灭

这是一个错字，但我正在回答，所以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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。