覆盖样式没有！在纯CSS中很重要

Question

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

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

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

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

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

这是小提琴......

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

Answer 1

最精确的选择器将起带头作用。

function intersectionOfTwoArrays(arr1, arr2)
{
   return arr1.filter(x => arr2.some(y => y === x)); 
}


function intersection(...arrayOfArrays)
{
	return arrayOfArrays
	       .reduce((a, b) => intersectionOfTwoArrays(a, b));
}

intersection(
[5, 10, 15, 20], 
[15, 88, 1, 5, 7], 
[1, 10, 15, 5, 20]
);

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

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

所以也许您可以使用#bar { background-color: green; } #foo #bar { background-color: blue; }

构建规则

Answer 2

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

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

updated fiddle

Answer 3

我在padding和left的两面都使用了right。因此div进入了全屏状态。

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

}

因此允许的宽度为80vw +填充（左右）20vw = 100vw。 那解决了我的问题。

希望这对您也有帮助。