在纯CSS中覆盖不带！的重要样式

Question

我正在设计一个基于谷歌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进行更改。

这是小提琴..

https://jsfiddle.net/mutafaf/cdb3dnqz/

Answer 1

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

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

}

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

希望这对你也有帮助。

Answer 2

最精确的选择器将领先。

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

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

在这里，你将有一个蓝色的背景！

所以也许你可以用#parent amp-sidebar构建一条规则

Answer 3

当你像这样给它的时候，它是工作的

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

updated fiddle