没有 !important 的覆盖样式 CSS

Question

我正在设计一个基于 Google-AMP 的网页。 Google-AMP 有一些限制，css !important 属性无法使用。

在Google-AMP中，内置样式使用!important 属性如下：

amp-sidebar {
  max-width: 80vw!important;
}

在我的场景中，我需要将样式 max-width 更新为 100vw。如何在不使用 !important 的情况下将 amp-sidebar 更新为 100vw？

PS: JavaScript 或 Inline-CSS 无法使用。我只需要使用 CSS.

进行更改

这里是fiddle..

Answer 1

最精准的选择者将获得领先。

<div id="foo">
  <div id="bar">
    Hi
  </div>
</div>

#bar {
  background-color: green;
}
#foo #bar {
  background-color: blue;
}

在这里，您将拥有蓝色背景！

所以也许你可以用#parent amp-sidebar

建立一个规则

Answer 2

你这样给它就起作用了

.parent amp-sidebar {
  min-width: 50vw !important;
  max-width: 100vw !important;
}

Answer 3

我在left和right两边都用了padding。所以 div 全屏显示。

amp-sidebar {
  padding-left: 10vw;
  padding-right: 10vw;

}

所以允许的宽度是 80vw + 填充（左和右）20vw = 100vw。那解决了我的问题。

希望这对你也有帮助。

Overriding style without !important in plain CSS