Question

我无法找到正确的css选择器来隐藏移动屏幕的div：

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

我尝试了很多选择器，但都没有工作。例如：

<style>
@media screen and (max-width: 900px) {
div.borders/border-left.html {
display: none;
    }
}

带有网址的div代码可以正常工作，但隐藏在移动设备屏幕上的div的选择器无法实现。

我没有在StackOverflow上找到任何为div代码提供css选择器的内容，其中包含一个URL，如上所述。

任何建议将不胜感激。

谢谢！

注意：包含div文件的完整代码如下。它是通过我们的大型网站上的HTML文件动态插入菜单，它工作正常。只是无法弄清楚如何在小屏幕上隐藏某些菜单。我无法在W3或任何地方找到解决方案。

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-left-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200) {elmnt.innerHTML = this.responseText;}
      if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
      /*remove the attribute, and call this function once more:*/
      elmnt.removeAttribute("w3-include-left-html");
      includeHTML();
    }
  }      
  xhttp.open("GET", file, true);
  xhttp.send();
  /*exit the function:*/
  return;
    }
  }
};
</script>

<body>

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

<script>
includeHTML();
</script>
</body>
</html>

Answer 1

你正试图在div.borders中使用'class'选择器....你的div没有class属性

你应该改为使用：

div[w3-include-left-html='borders/border-left.html']

Answer 2

这样的事情应该有效：

@media screen and (max-width: 900px) {
[w3-include-left-html="borders/border-left.html"] {
display: none;
    }
}

在@media中隐藏包含带有css的URL的div

2 个答案: