使用带有 susy 导航的第一个子选择器答案

【问题标题】：using the first-child selector with susy navigation使用带有 susy 导航的第一个子选择器
【发布时间】：2015-03-16 10:48:26
【问题描述】：

我正在尝试为我的导航添加一些管道 (|) 样式。

我的 susy 代码是 @include with-layout(6 inside, true){ @include 跨度(1);

我添加了＆：：前 { 内容：“|”； }

但是当我添加＆：第一个孩子 { ＆：：前 { 内容： ” ”; } }

它无法识别导航的每个实例都不是第一个子项 - 它会将我的 html 中的所有项目视为第一个子项。我该如何解决这个问题？

另外 - 关于如何使管道显示为分隔符的任何建议（即在 susy 导航项之间） - 我不想使用左边框，因为我想要一个微妙的效果。

谢谢，

维多利亚

【问题讨论】：

:first-child 正在查看您的 html。如果不知道标记的结构以及 Sass 中的 & 所指的内容，就不可能对此提供帮助。第一个孩子的问题与 Susy 无关，尽管您的 Susy 代码也很难理解。

标签： navigation susy

【解决方案1】：

感谢您的回答...我现在会尝试更好地为您发布代码。可惜不能用jsfiddle或者code pen举个例子——可惜这些code sn-p网站只接受css不接受scss和susy！！！

好的...

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>

scss 是 -

        .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);
                            }
                         }
                    }
                }
            }
        }
    }

我希望我已经为您剥离了足够多的示例。

非常感谢您的关注。

【讨论】：

【解决方案2】：

好的 - 我通过将border-right 设置为 50%（看起来与管道相同，并且自然位于按钮之间）解决了这个问题 --- 但我仍然想知道为什么第一个子选择器在上面的代码中不起作用。

现在我想使用最后一个孩子删除最后一个边框！！！！原理和上面的例子是一样的，但是如果你需要，我可以发布更多代码。

谢谢

【讨论】：