所以我做了一个ejs登录项目style.css：
[theme="bloodRed"] {
background-color: #ff2424;
color: #e571e1;
accent-color: #00ff00;
}register.ejs:
<!DOCTYPE html>
<html lang="en" theme="bloodRed">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign up</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="/css/style.css" rel="stylesheet">
<link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
</head>
<body>
<div class="container">
<div class="login-box">
<div class="row">
<div class="col-md-6">
<h2>Sign up</h2>
<form action="register" method="post">
<div class="form-group">
<label>First and Last name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-outline-info" style="margin-top: 10px;"> Sign up </button>
</form>
<p style="margin-top: 15px;">Already have an account? <a class="btn btn-outline-success" href="login">Login here!</a></p>
</div>
</div>
</div>
</div>
</body>
</html>然后这个js代码连接它们：
const express = require("express");
const app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");但是在register.ejs中，文本和背景都没有改变，如果你离开div，它是红色的，有帮助吗？
1条答案
按热度按时间luaexgnf1#
CSS遵循特异性和级联规则。您正在将
theme属性添加到html元素中，但是Bootstrap CSS（在重新启动时）覆盖了它，因为它在正文上应用了白色的背景色和#212529;的文本color。将主题属性添加到
body标记中会有所帮助，但还有很多其他地方会应用文本或背景色。最好使用Bootstrap SASS模块和/或自定义属性（CSS变量）。Customization的文档部分详细说明了如何使用。