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

Question

我正在使用 VuePress 来处理文档，对于主页，我想要一些更可定制的东西。我的问题是该类.theme-default-content有一个max-widthof 740px，如果我重写该类并更改它的最大宽度，它也会弄乱所有其他页面，而不仅仅是主页，因为在 VuePress 上所有页面都链接到主主题。我想要的是在页面内部扩展的
子类。 目前这不起作用，无论我如何尝试，它都不会覆盖它。我可以把它说得绝对，但这会带来更多问题。 有没有办法从内部覆盖父级的属性？headerwidth: 100%

Answer 1

您不能使用 CSS 中的子样式覆盖父样式，因为 CSS 中没有父选择器。

但是，您不需要重写任何内容即可为子元素提供width跨越100%视口的 a ；只需将视口单位 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>