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

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是什么。

例如，如果 .outerrule 上有添加边框的 CSS 规则，它们将不会呈现相同的效果。参见 this example .

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

这实际上完全取决于 CSS 本身。规则本身被“保留”，因为它们将同样适用于每个新元素。 (假设在您的代码中，它们都是类。)