Question

我的问题很简单，我只需要知道这是否可行。

这是我的HTML＆amp;的简单版本。 css代码

HTML：

<div class="parent">
    <div class="ch1">CHILD 1</div>
    <div class="ch2">CHILD 2</div>
</div>

CSS：

.parent {background-color:red}

我想知道是否可以阻止“继承 背景颜色属性的CHILD1 div从其父元素

P.S。我的意思并不是要覆盖那个属性，而是要阻止继承，因为它从来没有 background-color 属性。

谢谢

Answer 1

background-color不是继承的，默认值是透明的。因此父类的背景颜色将被视为为子项设置。

初始值：透明适用于：所有元素继承：否

Answer 2

孩子实际上并没有继承背景色。孩子的背景是透明的。你看到一个红色的背景，因为它坐在红色的顶部，但这对孩子来说没有任何意义;如果你把它放在它的父母之外它就不会有红色背景。

你实际上要求的是让子元素在父母的背景中切出一个洞，以便它背后的元素显示出来。是吗？

如果这就是你所追求的，那么不，你不能这样做。

最接近它的是clip CSS属性。

您可以将父级CSS上的clip定义为一个矩形，它覆盖与子元素相同的空间。（当然，你必须提前知道孩子的尺寸才能做到这一点）

这将是实现你所追求的目标的一种方式，但clip确实有一些主要的限制，尤其是它只有在元素为position:absolute或{{1}时才有效}}

另一种选择可能是使用SVG而不是HTML。使用SVG更容易实现这种效果，因为它是一种适当的图形语言。

Answer 3

我给你写了一个ha句。

这不可能。

尝试这是错误的。

孩子们会哭泣。

在您的示例中，只需覆盖背景颜色（如上所述，不是继承但是透明）。或者重新排列HTML。我不明白沉默寡言。如果这使您的代码成为一部分困难，请发布整个问题，我们会帮助您解决问题。

Here是另一个答案，提供更多信息。

<强>替代

如果您担心代码库的可维护性，特别是对于大量的颜色和样式。您可以查看LESS或SASS作为克服CSS继承限制的方法。这两个框架都提供了嵌套运算符和变量等功能。