Переопределение стиля без! Важный в простом 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

Это работает, когда вы даете это так

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

обновленная скрипка

Answer 2

Я использовал padding с обеих сторон left и right. Таким образом, div занял полный экран.

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

}

Таким образом, допустимая ширина была 80vw + отступ (слева и справа) 20vw = 100vw. Это решило мою проблему.

Надеюсь, это вам тоже поможет.

Answer 3

Самый точный селектор возьмет на себя инициативу.

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

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

Здесь у вас будет синий фон!

Так что, может быть, вы можете построить правило с #parent amp-sidebar