css - 在纯 CSS 中覆盖没有 !important 的样式

Question

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

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

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

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

PS：不能使用 JavaScript 或 Inline-CSS。我只需要使用 CSS 进行更改。

这是小提琴..

score 0 · Accepted Answer

最精确的选择器将带头。

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

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

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

所以也许你可以建立一个规则#parent amp-sidebar

score 0 · Accepted Answer

当你这样给它时它正在工作

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

score 0 · Accepted Answer

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

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

}

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

希望这对您也有帮助。

3 回答 3