css - 从子 css 覆盖父级的最大宽度

Question

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

Answer 1

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

但是，您不需要覆盖任何东西来为子元素提供一个跨越 100% 视口(viewport)的 width；只需使用 viewport unit vw 作为宽度: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>

请注意，如果您在父级上有填充，您可能希望从视口(viewport)的 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>