Question

考虑到CSS规则以各种方式组合，在一般情况下，以下两个HTML代码段是否相同？如果没有，他们有什么合理的情况吗？

1）

<div class="outerrule">  
    <div class="innerrule1">content1</div>  
    <div class="innerrule2">content2</div>  
</div>

2）

<div class="outerrule">  
    <div class="innerrule1">content1</div>  
</div>  
<div class="outerrule">  
    <div class="innerrule2">content2</div>  
</div>

Answer 1

考虑到CSS规则以各种方式组合，在一般情况下，以下两个HTML代码段是否相同？

考虑到CSS规则以各种方式结合......没有一般情况。

如果根本没有作者CSS，那么我认为它们将呈现相同的（因为我认为div默认有0个边距/填充）。

Answer 2

这取决于CSS是什么。

例如，如果.outerrule上有一个添加边框的CSS规则，则它们不会呈现相同的内容。请参阅this example。

另一方面，如果.outerrule只有一些字体样式，它们将呈现相同的字体样式。请参阅this example。

它真的完全依赖于CSS本身。规则本身被“保留”，因为它们将同等地应用于每个新元素。（假设，在你的代码中，它们都是类。）

Answer 3

在大多数情况下，这两个示例都应以相同的方式呈现。您可以找到差异的几个示例：.innerrule1 + .innerrule2，.outerrule div:last-child，outerrule div:first-child

拆分父级时是否保留CSS规则？

3 个答案: