CSS Смежный селектор/значение

Ответ 1

Выберите .d внутри .c, который находится рядом с .b внутри .a

Да, это правильно. То, как вы разместили свои скобки, также имеет смысл для меня. Заглушите их еще более понятным:

(((.a) .b) + .c) .d

В этом примере сопоставляется только второй элемент p.d:

<div class="a">
  <div class="b">
    <p class="d"></p> <!-- [1] -->
  </div>
  <div class="c">
    <p class="d"></p> <!-- [2] -->
  </div> 
  <div class="c">
    <p class="d"></p> <!-- [3] -->
  </div>
</div>

• Не выбрано
  Этот элемент p.d не содержится в элементе с классом c.

• Selected
  Этот элемент p.d содержится в элементе .c. Элемент .c сразу следует за элементом .b, и оба из них совместно используют элемент предка .a.

• Не выбрано
  Этот элемент p.d содержится в элементе .c. Однако это не сразу следует за элементом .b; вместо этого он приходит после другого элемента .c, поэтому его p.d не удовлетворяет селектору.

  Если общий комбинированный комбинатор ~ использовался вместо смежного комбинатора sibling +, как в

  .a .b ~ .c .d
  

  Тогда этот p.d будет соответствовать.

Каков приоритет + оператора в грамматике CSS?

Все составные селекторы и комбинаторы в последовательности обрабатываются справа налево, используя каждую селекторную группу в качестве шага. Этот ответ уточняет. (Это может быть противоречащим интуиции, когда вы думаете в скобках, чтобы понять это, просто обрабатывайте скобки, как если бы самые внешние были первыми. Любой заказ - это хорошо, хотя, если вы помните, что комбинаторы не являются ассоциативными. связанный ответ для деталей.)