从 child css 覆盖 parent 的 max-width

Question

我在文档和主页上使用 VuePress，我想要一些更可定制的东西。我的问题是 class .theme-default-content 的 max-width 为 740px，如果我覆盖此 class 并将其更改为 max-width，它将把所有其他页面也弄乱了，不仅是主页，因为在 VuePress 上，所有页面都链接到主题。
我想要的是 child class 将在 header 内扩展到页面的 width: 100%。
目前这是行不通的，无论我尝试多少，它都不会覆盖它。我可以让它绝对化，但这会产生更多问题。
有没有办法从内部覆盖 parent 的属性？

Answer 1

您不能用 CSS 中的子样式覆盖父样式，因为 CSS 中有 no parent selector。

但是，您不需要覆盖任何东西来为子元素提供一个 width 跨越 100% 的视口；只需将 viewport unit vw 用作 width: 100vw:

body {
  margin: 0;
}

.outer {
  height: 100px;
  width: 200px;
  max-width: 200px;
  background: red;
  padding: 25px;
}

.inner {
  height: 100px;
  width: 100vw;
  background: blue;
}

<div class="outer">
  <div class="inner"></div>
</div>

请注意，如果您在父级上有填充，您可能需要从视口的 width 中减去这个（这样就没有水平滚动条） .这可以通过 calc():

来完成

body {
  margin: 0;
}

.outer {
  height: 100px;
  width: 200px;
  max-width: 200px;
  background: red;
  padding: 25px;
}

.inner {
  height: 100px;
  width: calc(100vw - 25px);
  background: blue;
}

<div class="outer">
  <div class="inner"></div>
</div>

从 child css 覆盖 parent 的 max-width

Override parent's max-width from child css

css

overriding

parent-child