为什么我的样式表适用于我的所有 ejs 文件？

Question

我正在使用 Express、MongoDB 和 EJS 模板视图引擎创建一个 nodeJS 应用程序。我已经创建了创建服务器的 server.js 文件。我创建了一个单独的 header.ejs 文件，我将把它包含在我的其他 ejs 文件中（如 index.ejs、about.ejs、contact..ejs 等）。但是，当我仅为 header.ejs 文件创建样式表时，样式将应用于所有 ejs 文件（index.ejs、about.ejs 等） 我已将 header.ejs 文件放在 ./public/partials/ 文件夹中，样式表位于 ./public/assets/ 文件夹中，我的 index.ejs 文件位于 ./views/ 文件夹中。

我在 server.js 文件中使用了 app.use(express.static(__dirname + "/public"))，在 index.ejs 中使用了 /assets/style.css，在 header.ejs 中使用了 /assets/header.css文件。

服务器.js

app.set('view engine' ,  'ejs');
app.use(express.static(__dirname + "/public"));
app.use(employeeController);

employeeController.js

router.get('/employee' , function(req, res){
    res.render("index");
});

module.exports = 路由器；

header.ejs

<link rel="stylesheet" href="assets/header.css">
<h2>Company Logo</h2>

index.ejs

 <link rel="stylesheet" href="/assets/style.css">
 <% include ../public/partials/header.ejs %>
  <h2>Please Enter the New Employee Information</h2>

当我将 h2 {color: indianred;} 放入 header.css 文件时，即使 header.css 仅链接到 header.ejs，index.ejs 文件中的颜色也会发生变化。

我只想更改 header.ejs 的。 我该怎么做？

Answer 1

当您将header.ejs 包含到index.ejs 中时，css 也会被添加。这就是您遇到此问题的原因。

要解决此问题，请将class/id 添加到h2，

<h2 class="h2_css">Company Logo</h2>

或者，

<h2 id="h2_css">Company Logo</h2>

现在像这样添加你的css，

h2.h2_css {color: indianred;} 

或

h2#h2_css {color: indianred;}