html - CSS order of applying bug -
html:
<div id="outer"> <div id="inner"></div> <div id="..."></div> </div> css:
#outer div { margin: 0 auto; } #inner { margin-top: 10px; } my problem inner div style. seems margin: 0 auto more important margin-top. same when put #outer div {...} below #inner {...}
i know how fix without using important. idea?
this not bug. #outer div more specific selector #inner. can think of css specificity points based system. in case each of 2 rules gets 10 points referencing id. first rule (which includes div element) gets 1 point. makes #outer div have 11 points , #inner left 10. means #outer div rule applied element.
#outer #inner { margin-top: 10px; } the above rule have 20 points , applied element.
Comments
Post a Comment