Question

@media (max-width: 767px){
    #nav-container option:nth-child(3), 
    option:nth-child(9), 
    option:nth-child(13) 
    {display: none !important;}
                               }

以上是我的css代码，试图隐藏在移动视图中显示的3个特定选项。但是，只有Chrome会使用我的手机显示我想要的内容。 Firefox和三星的默认浏览器并不隐藏3个特定选项。对此有何想法？

Answer 1

虽然您的样式确实存在问题，但问题不在于您的样式。 Android“Spinners” - 这是Android的下拉菜单的原生版本 - 无法使用CSS进行样式设置。而是由每个浏览器来解析你的CSS样式，并将相同的信息传递给Android Spinner，指示它隐藏某些元素。

参见http://jsbin.com/tenute，其中我做了两件事：

删除了@media查询的额外复杂性：这将允许我们从场景中删除尽可能多的变量
使每个选项都是薄荷绿色

现在在Chrome和Firefox中重新测试。请注意 - 与之前相同 - Chrome会隐藏这些选项，但Firefox不会。但是，请注意两个 Spinners仍然保持白色，即使样式指示它们是绿色的。（还有非常基本的造型，我可能会补充）。这是因为，在这种情况下，Chrome和Firefox都没有对其Spinners进行编程以反映来自CSS的背景颜色。

Answer 2

你有链接查看吗？

您的媒体查询看起来没问题 - 它可能是您的选择器。

您可以使用相同的类选择器来更改另一个css属性来测试它，我的目标是设置一个新的背景颜色并查看它是否已应用。如果不是，也许尝试不同的选择器。根据你的标记，nth-of-type可能有用。

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     background: green;

  }

如果您要隐藏的所有元素都包含在＃nav-container中，则您需要为每个后续内容使用父ID：

@media (max-width: 767px) {

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     display: none;

  }

}

或者，您可以采用移动优先方法：

  /* mobile */

 #nav-container option:nth-child(3), 
 #nav-container option:nth-child(9), 
 #nav-container option:nth-child(13) {

   display: none;

}

 /* desktop */

 @media (min-width: 767px) {

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     display: block; /* or default display property */

  }

}

移动：使用CSS隐藏选择框中的特定选项

2 个答案: