css - 如何在同一 CSS 文档中删除/重置/不继承 DIV/元素/... 的 CSS 属性？

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 > a、#nav ul ul:hover > a 的行为。

长话短说，如何让 #nav li:hover > a, #nav ul ul:hover > a {} 为空，摆脱它或不继承 CSS 文件中上面的值？

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

Answer 1

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' />

2. 由@Hashem/@emmanuel 回答评论

3. 覆盖您的媒体查询

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