麪包屑選擇了一個列表項列表項旁邊

香港專業教育學院創建了一個麪包屑，你可以在這裏看到的代碼http://jsfiddle.net/zgx5qcsx/麪包屑選擇了一個列表項列表項旁邊

我需要一個CSS選擇器來給&：後&：之前所有，但最後裏，但有無法弄清楚 - 目前笨拙我得到了：

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

來源

2014-09-03 Iamsamstimpson

你可以用'最後child'並設置'display'到'none'。或者你可以使用'li：not（：last-child）' – jfrej 2014-09-03 12:30:27

如果該網站是公開的，我還建議檢查一下http://caniuse.com/#feat=css-sel3並確保CSS會最有可能爲目標受衆服務。 – grim 2014-09-03 14:20:36

對於信息李+李這是一樣的李：第一孩子+李，你可以把你的風格給每個人後，如果你把它放在左邊而不是右邊 – AlexDom 2014-09-03 15:00:01

就像我以前說過li + li相同li:first-child + 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

來源

2014-09-03 15:27:09 AlexDom

麪包屑選擇了一個列表項列表項旁邊

回答

相關問題