为何添加<p>/<span>后input的background-image会消失？

最可能的原因是你用了**:first-child/:last-child这类依赖元素位置的伪类选择器**来设置input的背景图。举个例子，如果你的CSS是这么写的：

input:first-child {
  background-image: url('xxx.png');
}
input:last-child {
  background-image: url('yyy.png');
}

初始状态下，两个input是父元素的第一个和最后一个子元素，伪类匹配成功，背景图正常显示。但当你在第一个input前加<p>标签时，这个input就不再是父元素的:first-child了，对应的背景图样式自然失效；同理，在第二个input后加<p>，它也不再是:last-child，样式不生效。

另外还有两种少见但可能的情况：

• 父元素设置了display: flex且搭配了overflow: hidden，添加p标签后触发了flex布局的空间分配异常，导致input的背景图被挤压完全不可见（但你说试了flex还存在，这种概率较低）
• 浏览器对替换元素（input属于替换元素）的渲染bug，当相邻非替换元素（p是块级非替换元素）出现在首尾时，背景图的渲染逻辑异常，这种情况可以尝试给input添加background-clip: content-box或者显式设置width/height来验证。

解决建议：

• 把依赖位置的伪类换成类选择器，比如给两个input分别加class="input-left"和class="input-right"，直接通过类设置背景图，就不会受DOM结构变化影响
• 如果必须用伪类，改用:nth-of-type(n)，比如input:nth-of-type(1)和input:nth-of-type(2)，只要父元素里的input顺序不变，即使中间或首尾加其他标签，也能匹配到目标元素

内容的提问来源于stack exchange，提问作者Belfast