CSS样式 - Aside行为不起作用？

Question

我有以下HTML：

<div> 
<article> 
    <aside> 
     Text inside Aside 
     <p> 
      Text inside P inside Aside 
     </p> 
     <h4>Header inside Aside</h4> 
     <section> 
      <h4>Header inside Section inside Aside</h4> 
     </section> 
    </aside> 
</article> 

我有以下的CSS与它去：

h4 { 
     color: blue; 
    } 
    article{ 
     color: black; 
    } 
    aside{ 
     color: purple; 
    } 
    aside p{ 
     color: gray; 
    } 
    aside h4{ 
     font-style: italic !important; 
     color: yellow; 
    } 
    article h4{ 
     color: brown; 
    } 
    section h4{ 
     color: orange; 
    } 

为什么是它的“头里面除了”显示为紫色而不是黄色？所有其他元素似乎都显示了预期的颜色。 ??

Answer 1

这是布朗，因为你设置article h4后aside h4 ...只是切换顺序，使其黄色。

h4 { 
 
     color: blue; 
 
    } 
 
    article{ 
 
     color: black; 
 
    } 
 
    article h4{ 
 
     color: brown; 
 
    } 
 
    aside{ 
 
     color: purple; 
 
    } 
 
    aside p{ 
 
     color: gray; 
 
    } 
 
    aside h4{ 
 
     font-style: italic !important; 
 
     color: yellow; 
 
    } 
 
    section h4{ 
 
     color: orange; 
 
    }

<div> 
 
<article> 
 
    <aside> 
 
     Text inside Aside 
 
     <p> 
 
      Text inside P inside Aside 
 
     </p> 
 
     <h4>Header inside Aside</h4> 
 
     <section> 
 
      <h4>Header inside Section inside Aside</h4> 
 
     </section> 
 
    </aside> 
 
</article> 
 
    </div>

Answer 2

这背后的原因是CSS渲染你的页面的方式。

简单地说，它看起来它自上而下。最后的人会覆盖。