Question

我的CSS文件中有一行，它声明了在普通台式计算机上设计导航所需的一些属性。

对于桌面：

#nav li:hover > a, #nav ul ul:hover > a {color: #bbb; background: rgba(255, 255, 255, .95);}

通过使用媒体查询，我想在移动设备中查看网站时重新设计导航。到目前为止，非常好。

现在我的问题是，CSS文档后面的后续媒体查询会继承上面的那些值，而实际上我只是需要它们。我需要在导航下拉列表中没有悬停效果（因为iOS Safari不喜欢悬停）。

所以，我尝试了一个空输入，如：

移动设备：

#nav li:hover > a, #nav ul ul:hover > a {}

但那没用。它仍然显示了上述#nav li：hover＆gt;的行为。 a，＃nav ul ul：hover＆gt;一个。

简而言之，我如何获得#nav li：hover＆gt; a，＃nav ul ul：hover＆gt; a {}为空，取消它或不在CSS文件中继承上面的值？

顺便说一下，我无法更改导航上的代码，因为它是由Wordpress生成的。非常感谢你们，伙计们。

Answer 1

加载不同的样式表

<link rel='stylesheet' media='screen and (max-width: 779x)' href='mobile.css' /> <link rel='stylesheet' media='screen and (min-width: 780px)' href='desktop.css' />
由@Hashem / @emmanuel回答
在您的媒体查询中覆盖

#nav li:hover > a, #nav ul ul:hover > a { color: /* your color for mobile */ ; background: /* your background for mobile; */ ; }

Answer 2

您无法删除规则，您可以使用更具体的选择器覆盖它。

如果您使用媒体查询，则另一个选项是在媒体查询中包含桌面规则，并仅启用指定的维度，如：

@media (min-width: 1024px) {
  #nav li:hover > a, #nav ul ul :hover > a {
     color: #bbb;
     background: rgba(255, 255, 255, .95);
  }
}

Answer 3

我看到它的方式，你有两种主要的方法来实现这个目标：

如果检测到移动设备，则加载不同的样式表;
如果要覆盖已设置样式的伪元素，可以为悬停状态设置与正常状态相同的值，并使用!important覆盖非移动样式（如果需要）通过媒体查询。例如：

常规样式：

#nav li > a, #nav ul ul > a {
    background: rgb(255, 255, 255);
    color: #bbb;
    transition: background 0.5s, color 0.5s;
}
#nav li:hover > a, #nav ul ul:hover > a {
    background: rgba(255, 255, 255, .95);
    color: #ccc;
}

移动样式：

@media (max-width: 600px) {
    #nav li > a, #nav ul ul > a {
        transition: none!important;
    }
    #nav li:hover > a, #nav ul ul:hover > a {
        background: rgb(255, 255, 255)!important;
        color: #bbb!important;
    }
}

如果您需要对原始样式表进行大量修改，选项1最好，如果您只需要调整一些内容，则选项2。

如何在同一个CSS文档中删除/重置/不继承DIV / element / ...的CSS属性？

3 个答案:

常规样式：

移动样式：