列表项的面包屑选择器，旁边有一个列表项答案

【问题标题】：Breadcrumb selector for list items with a list item beside列表项的面包屑选择器，旁边有一个列表项
【发布时间】：2014-09-03 23:27:09
【问题描述】：

我创建了一个面包屑，您可以在此处查看代码http://jsfiddle.net/zgx5qcsx/

我需要一个 CSS 选择器来将 &:after &:before 提供给除了最后一个 li 之外的所有内容，但我无法弄清楚 - 目前我笨拙地得到了：

li:first-child,
li:first-child + li

这并不理想，因为随着更多步骤的添加，我必须修改！

任何建议将不胜感激

.breadcrumb
{
    width: auto;
    margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid grey;
background-color: light-grey;
li 
{
    float: left;
    margin: 0;
    width: 33.33333333%;
    a 
    {
        &:link, &:visited
        {
            position: relative;
            width: auto;
            display: block;
            // border-right: 1px solid grey;
            @include x-rem(padding, 20px 20px 20px 50px);
            text-decoration: none;
            span 
            {
                background-color: orange;
                color: white;
            }
        }
    }
}
li:first-child,
li:first-child + li 
{
    a
    {
        &:after
        {
            position: absolute;
            top: 0;
            right: -40px;
            display: block;
            content: "";
            border-top: 29px solid transparent;
            border-left: 30px solid light-grey;
            border-bottom: 29px solid transparent;
            border-right: 10px solid transparent;
            z-index: 2;
        }
        &:before
        {
            position: absolute;
            top: 0;
            right: -41px;
            display: block;
            content: "";
            border-top: 29px solid transparent;
            border-left: 30px solid grey;
            border-bottom: 29px solid transparent;
            border-right: 10px solid transparent;
            z-index: 1;
        }
        &.breadcrumb--active
        {
            background-color: white;
            &:after
            {
                border-left: 30px solid white;
            }
        }
    }
}
}

【问题讨论】：

您可以使用last-child 并将display 设置为none。或者你可以使用li:not(:last-child)
如果该网站是公开的，我还建议您查看 caniuse.com/#feat=css-sel3 并确保 CSS 最有可能适用于目标受众。
for info li + li 和 li:first-child + li 一样，如果你把它放在左边而不是右边，你可以把你的风格放在第一个之后

标签： css sass css-selectors

【解决方案1】：

就像我之前说的，li + li 与 li:first-child + li 相同（当然，如果你愿意，你可以在你的 li 中做类似& + li 的事情）。这是我的解决方案 - 我更改了选择器并将所有内容左对齐。

.breadcrumb
{
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid grey;
    background-color: lightgray;  // watch out it's lightgray not light-grey :)
    li 
    {
        float: left;
        margin: 0;
        width: 33.33333333%;
        a 
        {
            &:link, &:visited
            {
                position: relative;
                width: auto;
                display: block;
                // border-right: 1px solid grey;
                @include x-rem(padding, 20px 20px 20px 50px);
                text-decoration: none;
                span 
                {
                    background-color: orange;
                    color: white;
                }
            }
            &.breadcrumb--active //changed
            {
                background-color: white;
                &:after
                {
                    border-left: 30px solid grey;
                    z-index: 1;
                }
            }
        }
    }
    li + li //changed
    {
        a
        {

            &:after
            {
                position: absolute;
                top: 0;
                left: 0; //changed
                display: block;
                content: "";
                border-top: 29px solid transparent;
                border-left: 30px solid lightgray;
                border-bottom: 29px solid transparent;
                border-right: 10px solid transparent;
                z-index: 1; //changed
            }
            &:before
            {
                position: absolute;
                top: 0;
                left: -1px; //changed
                display: block;
                content: "";
                border-top: 29px solid transparent;
                border-left: 30px solid white; //changed
                border-bottom: 29px solid transparent;
                border-right: 10px solid transparent;
                z-index: 2; //changed
            }

        }
    }
}

Jsfiddle result

【讨论】：