CSS最後孩子：後不排除在UL

這裏是佈局的精髓：

<ul> 
    <li> 
     <div class="rel"> 
      <div class="abs">1</div> 
     </div> 
    </li> 
    <li> 
     <div class="rel"> 
      <div class="abs">2</div> 
     </div> 
    </li> 
    ...etc 
</ul>

的div幫助將文本放置在相對和絕對容器中以進行類型定位和轉換。

該導航BAV目前看起來如下：

1 / 2 / 3 / 4 / 5 /

我想它刪除最後一個「/」分隔符如下所示：

1 / 2 / 3 / 4 / 5

當我創建Nav Bar僅由ul和li項目組成，使用「li：last-child：after」選項正常工作並消除了最後一個分隔符。當我使用上面的技術創建它時，在li中有2個div容器，我無法弄清楚我需要的選擇器，以覆蓋：首先創建分隔符的after選擇器。

這是我曾嘗試過的：

選擇器，創建分隔符;

ul > li > .rel > .abs:after { 
     position: absolute; 
     bottom: 0; 
     left: 55px; 
     content: "/"; 
     font-size: 12px; 
     color: black; 
    }

選擇覆蓋上述選擇（我嘗試了所有低於版本和無工作）：

/* .rel > .abs ~ .rel > .abs { */ 
    /* li > .rel > .abs ~ li > .rel > .abs { */ 
    /* ul > li > .rel > .abs ~ ul > li > .rel > .abs { */ 
    /* .rel .abs:last-child { */ 
    /* .rel > .abs:last-child { */ 
    /* li > .rel > .abs:last-child { */ 
    ul > li > .rel > .abs:last-child { 
     position: absolute; 
     bottom: 0; 
     /*left: 55px; */ 
     content: "+"; 
     font-size: 12px; 
     color: black; 
    }

而不是覆蓋分隔，這最後的選擇在某種程度上消除了懸停（沒有提及，但你可以在jsfiddle中看到它）。這些最後幾行在jsfiddle中被註釋掉了，所以你可以看到我在懸停時的效果。

感謝您對CSS選擇器的尊重！

來源

2014-07-01 Dave Boal

像這樣http://jsfiddle.net/viphalongpro/rRKU3/26/請注意，您不需要覆蓋它，只是改變了選擇器'UL>李：沒有（：last-child）> .rel> .abs：在{...}' –

之後，您沒有覆蓋'.abs'後面的'：'。你的選擇器應該是'ul> li> .rel> .abs：last-child：after' – GusRuss89

在您的CSS中添加以下類。它將刪除最後一個孩子的「/」。

ul > li:last-child > .rel > .abs:after { 
content: " "; 
}

DEMO

來源

2014-07-01 05:49:05

CSS最後孩子：後不排除在UL

回答

相關問題