Wordpress如何通过自定义CSS隐藏移动端视图下的指定列表

你当前代码的错误点 #

• 选择器匹配错误：目标父容器id是footer-8，但你写的是#footer-shape-holder，完全没有命中目标元素的上层容器
• 类名缺少前缀：shape1如果是类名，必须加.前缀，现有写法会被浏览器识别为不存在的<shape1>自定义标签，无法匹配到元素
• 冗余属性过多：隐藏元素不需要设置float、margin、width等属性，同时混用visibility: hidden和display: none属于无效写法，后者已经可以完全让元素不占据页面空间

修复后的代码 #

如果shape1是li元素的第二个类名，使用以下代码：

@media screen and (max-width: 600px) {
  #footer-8 li.single-shape.shape1 {
    display: none;
  }
}

如果shape1是li元素内部的子元素类名，使用以下代码：

@media screen and (max-width: 600px) {
  #footer-8 li.single-shape .shape1 {
    display: none;
  }
}

生效排查注意事项 #

• 代码添加完成后，先清空WordPress站点缓存、浏览器移动端缓存，再刷新查看效果
• 如果仍被原有主题样式覆盖，可以给规则加!important提升优先级：display: none !important;
• 确认类名、id的拼写和大小写完全和页面实际结构一致

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