第一个是不显示背景色的,第二个是正常样式,这里是只有在手机端的华为浏览器出问题
解决: 看看代码中颜色的值写的是几个f, 我写的是#ffff,但正确的应该是#fff

---

关于这个,我一直想扩展一下的,关于颜色的值:
background-color

常见的有三种值:

• Keyword values,浏览器内置的颜色关键字,如:

background-color: red;

Hexadecimal value,十六进制表示颜色,#RRGGBBRR（红色）、GG（绿色）和 BB（蓝色）是 00 到 FF 之间的十六进制整数，用于指定颜色的强度。,如:

background-color: #bbff00;

• RGB value,如:

background-color: rgb(255, 255, 128);

但上面这个还可以写为rgba,第四个值就是透明度如:

background-color: rgba(255, 255, 128m,0.2);

还有其他的写法:

• HSLA value,如:

background-color: hsla(50, 33%, 25%, 0.75);

HSLA(H,S,L,A),
H:Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S:Saturation(饱和度)。取值为：0.0% - 100.0%
L:Lightness(亮度)。取值为：0.0% - 100.0%
A:Alpha透明度。取值0~1之间。

• Special keyword values,如:

background-color: currentColor;
background-color: transparent;

currentColor,从上面的父级元素继承color
transparent:透明

• Global values,如:

background-color: inherit;
background-color: initial;
background-color: unset;

inherit:inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all
initial:CSS 关键字 initial 将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何 CSS 属性。这包括 CSS 简写 all，initial 可用于将所有 CSS 属性恢复到其初始状态。
unset:CSS 关键字 unset 可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于inherit ，在第二种情况下（非继承属性）类似于initial。它可以应用于任何 CSS 属性，包括 CSS 简写属性 all
抄袭来自:MDN