應用：前菜單的頂層只有

-1

<div id="menu"> 
    <ul class="nav nav-pills nav-stacked"> 
    <li class="active"><a href="#">Home</a> 
     <ul class="sub-menu"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Messages</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Profile</a></li> 
    <li><a href="#">Messages</a></li> 
    </ul> 
</div>

我用這SASS的風格這麼一個三角形內部鏈接的文本之前插入：

#menu{ 
    width:300px; 
    .nav li{ 
    a{ 
    border-bottom: 1px solid #EDEDDE; 
       &:before { 
       content: ""; 
       display: inline-block; 
       width: 0; 
       height: 0; 
       border-top: 4px solid transparent; 
       border-bottom: 4px solid transparent; 
       border-left: 4px solid #333; 
       margin-left: 5px; 
       margin-right: 5px; 
       position: relative; 
      } 
    } 
    } 

    .sub-menu { 
    list-style:none; 
    padding-left: 30px; 
    border-bottom: 0; 
    } 
}

Codepen自舉這裏補充：http://codepen.io/GuerrillaCoder/pen/jPBMqG?editors=110

我想要的效果是這個在菜單的頂級只能插入，而且如果類「活動」是那裏的TRIANG le將指向下而不是正確。

我正在繞圈子，我無法弄清楚如何刪除插入的內容，隱藏它或改變選擇器只是頂級。還試圖阻止我的下劃線溢出到子菜單中。

有人可以給我任何提示嗎？

來源

2015-06-02 Guerrilla

我不知道SASS如何影響，但如果你可以結合僞選擇。要麼使用selector> selector只指定直接後代，要麼可以說：first-child :: before。 –

我認爲＆使它遞歸，但如果我刪除它然後它停止工作在一起。 – Guerrilla

這與Sass有什麼關係？除非Sass生成不正確的CSS，否則只發布已編譯的CSS。 – cimmanon

只應適用一般規則（那些能夠/會影響:after僞元素，所有的時間），以您的.nav a選擇（這是一個廣泛的選擇，覆蓋了你的.nav所有a元素）。

然後，具體靶向只是你想要的特殊behviour的那些：

.nav{ 
    a{ 
     border-bottom: 1px solid #EDEDDE; 
     &:before { 
     display: inline-block; 
     width: 0; 
     height: 0; 
     margin-left: 5px; 
     margin-right: 5px; 
     position: relative; 

     } 
    } 
    & > li > a:before { 
     content: ""; 
     border-top: 4px solid transparent; 
     border-bottom: 4px solid transparent; 
     border-left: 4px solid #333; 
    } 
    & > li.active a:before { 
     border-top: 4px solid #333; 
     border-right: 4px solid transparent; 
     border-left: 4px solid transparent; 
    }

我用後代選擇，以確保只有頂層的直接孩子會受到影響。

完整的示例：

http://codepen.io/anon/pen/vOxXpG

來源

2015-06-02 19:32:04

非常好！這是一種享受 – Guerrilla

應用：前菜單的頂層只有

回答

相關問題