Представление дерева DOM на основе селекторов CSS

Question

Я немного запутался с этой задачей, которая у меня есть: мне нужно написать dom-представление этих селекторов:

В настоящее время янаписал эту HTML-разметку:

<div class="red well">
  <div id="loop">
    <ul>
      <li class="active">
        <a href="">
          <img src="" alt="">
        </a>
      </li>
    </ul>
  </div>
</div>

Я пробовал этот код, но, похоже, я допустил какую-то логическую ошибку. Любой совет, почему моя HTML-разметка не получает свойства из изображения выше?

Answer 1

Представление DOM должно быть

<div class="red well">
  <div id="loop">
    <ul>
      <li class="active">
        <a href="">...</a>
        <!-- 0 or more nodes here -->
        <img src="" alt="" />

      </li>
    </ul>
  </div>
</div>

Изображение является следующим родным (~) - не обязательно непосредственным братом - ссылки, а не дочерним.

~ - это «общий селектор брата».