CSS неизвестное количество промежуточных элементов

Question

у меня есть DOM дерево, которое выглядит примерно так (в виде регулярных выражений):

div.container (div.notbox | div.box)+ 

Теперь мне нужно так выбрать все «первый уровень» .box детей. Давайте предположим следующий документ:

<div class="container"> 
    <div> 
     <div class="box" id="1"> 
      <div class="box" id="2"></div> 
     </div> 
    </div> 
    <div class="box" id="3"></div> 
</div> 

В этом случае я должен был бы выбрать # 1 и # 3, но не # 2. Есть ли способ сформулировать это с помощью запроса CSS? Что-то вроде

.container > :not(.box) > .box 

но повторяйте: не (.box) статью неопределенное количество раз?

Answer 1

Возможно, таким образом:

.box {/* styles */} 
.box .box {/* styles */} 

Во всяком случае я бы suddgest вам создавать различные классы:

<div class="container"> 
<div> 
    <div class="box" id="1"> 
     <div class="childBox" id="2"></div> 
    </div> 
</div> 
<div class="box" id="3"></div> 

Или, если же стили необходимы плюс стили childBox:

<div class="container"> 
<div> 
    <div class="box" id="1"> 
     <div class="box childBox" id="2"></div> 
    </div> 
</div> 
<div class="box" id="3"></div>