Question

我使用google places api进行地方自动填充搜索 - 用户开始输入并弹出结果。

我使用！important来设置Google容器的样式以覆盖样式。因此，对于通过媒体查询我的桌面CSS，我有类似的东西：

bottom: 100px !important;
top: auto !important;

现在在我的移动设备上，再次通过媒体查询，我需要移动位置，我需要恢复默认样式 - 样式通过谷歌在元素的样式标签中控制。但是因为我使用了重要的我不能删除它们。我试过了：

bottom: auto !important;

它修复了底部位置，但是如何删除顶部位置以使其默认为元素上样式标记中的内容。我试过了：

top: auto !important;
top: inherit !important;

但没有运气。

Answer 1

使用那么多!important是凌乱的。

一些建议：（基于您展示的小代码）

2。请勿使用:auto覆盖:auto。尝试使用与:auto

类似的外观数字覆盖样式

3。尝试正确删除所有!important并在其透视媒体查询解析中调用唯一的CSS。例如

    @media screen and (min-width:320px) and (max-width:480){
         ... // Your unique styles to Mobile Here
    }

4. 如果一切都失败了;但是，不知道为什么会这样。您可以使用jQuery .toggleClass在条件中附加一个类。并且.removeClass随时随地。这是.toggleClass (demo)的简单小提琴。

但你真的应该能够清理你的CSS并将所有内容放入他们特定媒体查询定义的分辨率中。

Answer 2

您应该可以通过提高移动css文件的特异性并在移动样式表中为此新值添加！important值来实现此目的。

我不确定你的结构没有看到你的html但你是否可以在移动css特定的父容器/元素中添加一个额外的类或id并使用它来定位你的移动视图

例如

#mymobile .classtooverride {newstyles !important;}