html表单和提交类型按钮悬停效果的问题

Question

我一直试图将HTML<form>元素扭曲/封闭为<div>元素，但似乎<form>的边界超出了<div>的边界。有办法解决吗?

提交类型按钮检查代码片段

body>.main-container {
position: absolute;
border: 2px solid red;
background-color: black;
border: 1px solid rgba(8, 5, 5, .5);
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
border-radius: 30px;
width: 80%;
height: 25%;
left: 10%;
top: 30%;
}
form {
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 10px solid indianred;
padding: 0%;
marker: 0%;
width: 100%;
}
form div button {
width: 250px;
height: 50px;
border-radius: 20px;
margin-top: 15%;
margin-left: 20%;
font-size: 30px;
color: rgba(255, 238, 237);
background-color: rgb(255, 106, 69);
}
form>div>button[type=submit]:hover {
color: rgba(255, 142, 120);
background-color: rgba(255, 0, 0);
}

<div class='main-container'>
<form>
<div className="new-expense__controls">
<div className="new-expense__control">
<label> E-mail </label>
<input type="text" placeholder="E-mail" />
</div>
<div className="pass__control">
<label> Password </label>
<input type="password" placeholder="Password" />
</div>
<div>
<button type="submit"> Login </button>
</div>
</div>
</form>
</div>

Answer 1

我真的不明白你问题的第一部分想要达到什么目的。但悬停应该工作，如果你使用正确的选择器。在form和button之间有两个div。查看代码片段:

form>div>div>button[type=submit]:hover {
color: rgba(255, 142, 120);
background-color: rgba(255, 0, 0);
}

<div class='main-container'>
<form>
<div className="new-expense__controls">
<div className="new-expense__control">
<label> E-mail </label>
<input type="text" placeholder="E-mail" />
</div>
<div className="pass__control">
<label> Password </label>
<input type="password" placeholder="Password" />
</div>
<div>
<button type="submit"> Login </button>
</div>
</div>
</form>
</div>