Как селектор элемента более специфичен, чем селектор идентификатора?
Как я понимаю, элементы являются наименее конкретными. (элемент против идентификатора). Пожалуйста, помогите мне понять специфику селекторов в целом.
<div id="container">
<div id="firstDiv">FIRST Div inside CONTAINER</div>
<div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>
body{
width: 780px;
margin: 20px auto;
}
#container > div:not(:last-of-type){
margin-bottom: 0px; /*How its more specific than ID selector below? */
}
#container {
border: 15px solid orange;
padding: 10px;
}
#firstDiv{
margin: 50px; /*This is not taking effect*/
border: 5px solid blueviolet;
}
#secondDiv{
border: 5px solid brown;
}