css子元素没有覆盖父元素(css子元素没有100%)

在 CSS 中我们常常会使用子选择器（子元素）来选择某个元素的子元素，然后对它们进行样式设置。但是，有时候我们会发现，用子选择器设置的样式未能完全被子元素所继承或应用。

.parent >.child {
width: 100%;
background-color: red;
}

上述代码是一个子选择器设置的样式，它表示选择所有 class 为 child 的元素，但只有作为 class 为 parent 的元素的子元素才会应用这个样式。

然而，很多开发者在使用这样的样式时，都会发现它们并没有被完全赋予子元素。另一个元素的尺寸、边距、边框等样式，都可能会影响这个子元素。这是因为，子元素的尺寸和位置都是相对于父元素定位的，而父元素的样式也会对子元素造成影响。

换言之，无论你怎样设置子元素的样式，都不能绕开父元素对它的影响。如果你想确保子元素被完全和正确地赋予样式，那么你需要考虑父元素的样式是否对其产生了影响。通常而言，更好的做法是尽可能地减少父元素的影响，或使用更具针对性的样式设置。