Question

我正在为文档和主页使用VuePress，我想要更多可定制的东西。我的问题是，类.theme-default-content的{{1}}中的max-width是740px，如果我重写该类并更改它的最大宽度，那么它也会弄乱所有其他页面，不仅主页，因为在VuePress上，所有页面都链接到主主题。
我想要的是子类，该子类将在header内扩展到页面的width: 100%。
目前，这是行不通的，无论我尝试多少，都永远不会覆盖它。我可以将其设置为绝对，但这会带来更多问题。
有没有办法从内部覆盖父母的财产？

Answer 1

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

但是，您无需重写任何内容即可为子元素提供一个跨视口width的{{1}}；只需将viewport unit 100%用作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>中减去（以便没有水平滚动条）。可以使用calc()：

width

body {
  margin: 0;
}

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

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

从子CSS覆盖父对象的最大宽度

1 个答案: