这里有两个<input>字段，其中有background-image，看起来正常。当我在第一个input之后和第二个（中间）之前添加两个<p>或<span>时，一切都没问题，但是如果我在中间添加一个<p>标签，并且在第二个输入之后或第一个输入之前添加一个，那么background-image相应地在第二个或第一个输入字段上消失。
有人能解释一下发生了什么吗？
form {
background-color: blue;
}
input {
background-color: transparent;
border: 1px solid white;
}
input:first-child {
background-image: url(./Images/user-icon.png);
background-repeat: no-repeat;
}
input:last-child {
background-image: url(./Images/lock-icon.png);
background-repeat: no-repeat;
}<form action="">
<input type="text" name="" id="" />
<p>text</p>
<input type="password" name="" id="" />
<p>text</p>
</form>我尝试了display：flex，display：block -这里也一样。
1条答案
按热度按时间llew8vvj1#
当你把一个p元素放在第二个input之后时，这个input就不再是最后一个子元素了。
在这个例子中，你可以通过使用last-of-type来解决这个问题：
同样，您可以对第一个输入使用first-of-type，以覆盖在此之前有一个p元素的情况。