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渲染你的頁面的方式。

簡單地說，它看起來它自上而下。最後的人會覆蓋。