CSS смежный селектор / смысл - PullRequest
Новая
       1

CSS смежный селектор / смысл

2 голосов
/ 31 июля 2011

Что означает следующий селектор? 

.a .b + .c .d { ... }

Предполагаемое значение (и способ его функционирования): выберите d внутри c, смежной с b внутри a

/* Brackets to hide ambiguity */
(.a .b + .c) .d

Правильно ли используется селектор смежного брата? Что такое оператор + приоритет в грамматике CSS?

1 Ответ

5 голосов
/ 31 июля 2011

Выберите .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>

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

  2. Selected
    This *Элемент 1030 * содержится в элементе .c.Элемент .c следует сразу за элементом .b, и оба они имеют общий элемент .a.

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

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

    .a .b ~ .c .d

    Тогда это p.d будет сопоставлено.

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

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

...