, используя селектор первого ребенка с навигацией susy

Question

Я пытаюсь добавить стиль моей трубы (|) в мою навигацию.

Мой подозрительный код @ включить с-макетом (6 внутри, правда) { @include span (1);

Я добавил & :: до { содержание: "|"; }

но когда я добавить &: первого ребенка { & :: до { содержания: "«; } }

он не признает, что каждый экземпляр навигации не является первым ребенком - он видит все элементы в моем html в качестве первого ребенка. Как это исправить?

Кроме того, любые предложения о том, как сделать трубопровод отображаться как разделитель (т. Е. Между элементами навигации Susy) - я не хочу использовать границу слева, потому что хочу тонкий эффект.

Спасибо,

Виктория

Answer 1

Спасибо за ответ ... Я постараюсь и разместить код лучше для вас сейчас. Как жаль, что я не могу использовать jsfiddle или ручку кода, чтобы представить пример - очень жаль, что эти сайты с фрагментами кода принимают только css, а не scss и susy !!!

Ok ...

HTML, это -

<div class="nav"> 
    <ul> 
     <li><a class="button active" href="#home">Home</a></li> 
     <li><a class="button" href="palms-for-sale.html">Shop</a></li> 
     <li><a class="button" href="ordering.html">Ordering</a></li> 
     <li><a class="button" href="delivery.html">Delivery</a></li> 
     <li><a class="button" href="plant-care.html">Care</a></li> 
     <li><a class="button" href="about.html">About</a></li> 
    </ul> 
</div> 

является СКС -

 .nav { 

     @include susy-breakpoint($xmedium-bp, $medium) { 
      @include span(8 of 8 at 0); 
      @include margin-leader(1); 
      height: 30px; 
      line-height: 30px; 
      vertical-align: middle; 

      ul { 
       li { 
        display: inline; 
       } 
      } 
     } 

     @include susy-breakpoint($large-bp, $large) { 
       @include span(8 of 8 at 0); 
      } 

     ul { 
      li { 
       a { 

        &.button { 

         @include susy-breakpoint($xmedium-bp, $medium) { 
          @include with-layout(6 inside, true){ 
           @include span(1); 

           &::before { 
            content: " | "; 
           } 

           &:first-child { 
            &::before { 
             content: ""; 
            } 
           } 
          } 
         } 

         @include susy-breakpoint($large-bp, $large) { 
          @include with-layout(6 inside, true){ 
           @include span(1); 
          } 
         } 
        } 
       } 
      } 
     } 
    } 

Я надеюсь, что я лишила пример назад достаточно для вас.

Большое спасибо за просмотр.

Vx

Answer 2

Ok - я обойти эту проблему, используя пограничную-право устанавливать до 50% (что выглядит так же, как труба, и, естественно, расположенным между кнопками) --- но я по-прежнему вам интересно узнать, почему селектор первого ребенка не работает в вышеуказанном коде.

Теперь я хочу удалить последнюю границу справа, используя последнего ребенка !!! Принцип такой же, как в приведенном выше примере, но я могу разместить больше кода, если вам это нужно.

Thanks