0

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

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

我在 { content: " | "; 之前添加了 &:: }

但是当我添加 &:first-child { &::before { content: " "; } }

它不承认导航的每个实例都不是第一个孩子 - 它会将我的 html 中的所有项目视为第一个孩子。我该如何解决？

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

谢谢，

维多利亚

4

2 回答 2

0

感谢您的回答...我现在会尝试更好地为您发布代码。可惜不能用jsfiddle或者code pen举个例子——可惜这些代码片段网站只接受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

于 2015-03-17T11:43:04.807 回答
0

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

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

谢谢

于 2015-03-17T11:54:30.060 回答