#菜鸟一枚，学习java过程中，jsp映入外部样式css文件部分id选择器不生效，只用使用内部样式才生效
其中#remember和#errorMsg的样式不生效只有使用内部样式才生效（行内样式的优先级最高）
但是 id选择器的优先级应该高于其他选择器的不知道为什么无法生效，请求各位指教。
//外部css文件代码
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(../image/Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 380px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
#remember {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
padding-left: 10px;
height: 20px;
width: 20px;
}
#username {
width: 200px;
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
#password {
width: 202px;
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
#errorMsg {
text-align: center;
color: red;
}
#subDiv {
text-align: center;
margin-top: 30px;
}
#loginMsg {
text-align: center;
color: aliceblue;
}
//jsp代码
<%--
Created by IntelliJ IDEA.
User: lijianglong
Date: 2024/7/22
Time: 09:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="LoginCSS/login.css" rel="stylesheet">
</head>
<body>
<div id="loginDiv" style="height: 350px">
<form action="/brand-demo/loginServlet" id="form">
<h1 id="loginMsg">LOGIN IN</h1>
<div id="errorMsg">${errorMsg}</div>
<p>Username:<input id="username" name="username" type="text"></p>
<p>Password:<input id="password" name="password" type="password">${cookie.username.value}</p>
<p>Remember:<input id="remember" name="remember" type="checkbox" value="1">${cookie.password.value}</p>
<div id="subDiv">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
<a href="register.html">没有账号？</a>
</div>
</form>
</div>
</body>
</html>
预期效果：
不使用外部样式使用内部样式的效果：
