正在使用嵌套样式 css<div> 总是可交换的？</div><div id="text_translate"><p> 我试图了解您使用 div 标签定义 css 样式的顺序是否重要。</p><p> 是： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="some styling 1"&gt; &lt;div class="some styling 2"&gt; Some content &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p><p> 始终与以下内容相同： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="some styling 2"&gt; &lt;div class="some styling 1"&gt; Some content &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p><p> ?</p><p> 谢谢！</p></div>

Question

I am trying to understand whether the order in which you define css styling using div tags matters.

Is:

 <div class="some styling 1"> <div class="some styling 2"> Some content </div> </div>

Always the same as:

 <div class="some styling 2"> <div class="some styling 1"> Some content </div> </div>

?

Thanks!

Answer 1

Clearly not, if you were for instance to put

border: 2px solid #000000;
padding: 5px;

on some styling 1 , and padding: 5px; on some styling 2

The first instance will produce a box with a border on the outside box and the content will have a padding of 5px relative to the border , plus 5px of padding relative to the inner box, meaning the content will have 10px padding and an outer border. Here the border is 10px away from the content

The second instance will produce a box with an outer padding of 5px then a 2px border followed by 5px padding then the content. As you can see the border has now shifted position and is 5px away from the content