Question

我正在尝试在导航中添加一些竖线（|）样式。

我的嫌疑人代码是 @include with-layout（6 inside，true）{ @include span（1）;

我补充说＆amp; :: before { 内容：“|”; }

但是当我添加＆amp ;: first-child { ＆amp; :: before { 内容：“”; } }

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

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

谢谢，

维多利亚

Answer 1

感谢您的回答......我现在尝试为您更好地发布代码。可惜我不能用jsfiddle或代码笔来提供一个例子 - 很可惜这些代码片段网站只接受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);
                            }
                         }
                    }
                }
            }
        }
    }

我希望我把这个例子剥离回来。

非常感谢你寻找。

Vx的

Answer 2

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

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

由于

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

2 个答案: