Идентификаторы и классы CSS определены для одного элемента, если есть дочерние элементы, какой из них является родительским?

Question

Учитывая такую ​​структуру, как:

<div class="Stargate" id="MGM"> 
   <div class="SG1">
   </div>
   <div id="Atlantis">
   </div> 
</div> 

Какими будут SG1 и «Звездные врата» Атлантиды или MGM?

Answer 1

Разницы нет, и Stargate, и MGM принадлежат одному и тому же родителю div. Но вы обнаружите, что MGM является «лучшим» или «более сильным» из двух способов определения этого div.

Под «лучше / сильнее» я имею в виду, что id будет иметь значение в CSS / javascript, например, в CSS идентификатор сильнее.

#MGM .SG1 {
    /* very strong selector */
}

.Stargate .SG1 {
    /* not so strong selector */
}

В JavaScript у вас есть

var parentDiv = document.getElementById('MGM');

, где document.getElementById широко поддерживается, тогда как соответствующий document.getElementsByClassName является относительно новым дополнением к современным браузерам.