CSS / HTML孩子会覆盖父母吗？

Question

给出以下代码：

<div id="bla">
    <p class="blubber">Johnny Bananas</p>
</div>

和那个html doc的头部风格：

<style>
    div#bla{background:yellow}
    p.blubber{background:purple}
</style>

为什么孩子会被涂成紫色并覆盖其父母？

Answer 1

默认情况下，子级不会继承background属性。因此，div#bla的背景样式不适用于p.blubber，而p.blubber可以独立于其父级指定自己的背景颜色，无论其具体如何。

由于background未被继承，因此实际上不会覆盖。

Answer 2

当使用多个样式表时，样式表可能会争夺特定选择器的控制权。在这些情况下，必须有关于哪种样式表的规则将胜出的规则。以下特征将决定矛盾样式表的结果。

查看有关级联顺序的部分 - http://htmlhelp.com/reference/css/structure.html

Answer 3

因为特异性相同，所以规则将适用于p元素。如果您删除p并且只有.blubber，则无效。

此外，儿童不能覆盖父母，因此如果内容更多，您会在p周围看到黄色（添加div的填充）。

背景颜色不是CSS中的继承属性。