如何在移动端用CSS媒体查询隐藏带w3-include-left-html属性的div？

我来帮你搞定这个CSS选择器的问题！你当前的代码之所以无效，是因为你错误地把自定义属性的属性值当成了类选择器来使用，这根本匹配不到目标元素。

问题分析 #

你的目标div是带有自定义属性w3-include-left-html="borders/border-left.html"的元素，而你写的div.borders/border-left.html是在寻找类名为borders/border-left.html的div——但你的div根本没有这个类，所以选择器完全不生效。

正确的解决方案 #

使用CSS的属性选择器来精准定位这个div，代码如下：

@media screen and (max-width: 900px) {
  /* 匹配拥有指定属性且属性值完全一致的div */
  div[w3-include-left-html="borders/border-left.html"] {
    display: none;
  }
}

额外优化建议 #

如果后续可能有更多类似的引入元素，更推荐给这个div添加一个专属class，这样选择器会更简洁，也更易维护：

1. 修改HTML：

<div class="left-border-include" w3-include-left-html="borders/border-left.html"></div>

2. 对应的CSS：

@media screen and (max-width: 900px) {
  .left-border-include {
    display: none;
  }
}

另外，你可以根据实际的移动端适配需求，调整媒体查询的断点（比如改成768px，这是平板和手机的常见分界点），确保效果符合预期。

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