如何在小屏幕设备上修改WooCommerce信息通知栏的背景色？

你之前的尝试存在两个关键问题：

• 用@media (min-width: 992px)是针对屏幕宽度≥992px的桌面设备，完全没覆盖移动端范围，移动端得用max-width来匹配小屏幕。
• 代码存在语法错误：.woocommerce-info后面没加{，!important的位置也错了，必须放在属性值的分号前面。

给你两个可行方案：

方案1：单独修改移动端背景色 #

如果只想给移动端设置黑色背景，用这段代码：

/* 适配屏幕宽度≤991px的移动端设备 */
@media (max-width: 991px) {
  .woocommerce-info {
    background-color: #000 !important;
  }
}

方案2：全局统一背景色（桌面+移动端） #

如果想让桌面和移动端的通知栏都用黑色，直接写全局样式就行，不用媒体查询：

.woocommerce-info {
  background-color: #000 !important;
}

如果还是不生效，打开浏览器开发者工具（按F12），切换到移动端视图，选中通知栏元素，确认它的类名确实是.woocommerce-info——有些主题可能会给移动端元素加额外类名，得用实际类名替换。

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