：不選擇不工作在ul類 - 替代品？

我已經創建了我的標題並下載了nav，並在每個單詞之間都有迷你分隔線 - 唯一的例外是最後一個單詞。但最後一句話，我有一個下拉菜單。我試圖把這個下拉列表放在名爲花名冊的李類中，並且做了:not(.roster)那裏我有:not(:last-child)。現在，就好像我甚至沒有那裏的不選擇。這是一個JSFiddle。：不選擇不工作在ul類 - 替代品？

所以，回到我的問題......有沒有其他的選擇：非選擇？我讀過它在Internet Explorer 8上無法正常工作，但我使用Google Chrome 41.0.2272.118。這裏是我的代碼：

RELEVANT HTML

<div id="nav-clearfix"> 
     <nav id="nav"> 
      <ul class="nav-pages"> 
       <li class="current-menu-item"><a href="#">HOME</a></li> 
       <li><a href="#">GALLERY</a></li> 
       <li><a href="#">ABOUT US</a></li> 
       <li><a href="#">SPONSORS</a></li> 
       <li class="roster"><a href="#">ROSTER</a> 
        <ul class="fallback"> 
         <li><a href="#">Management</a></li> 
         <li><a href="#">Competitive</a></li> 
         <li><a href="#">Editors</a></li> 
         <li><a href="#">Feeding</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 
    </div>

CSS

#header_logo-clearfix { 
    width: 100%; 
    height: 100px; 
    top: 30px; 
    display: block; 
    background-color: #02236a; 
} 

#logo { 
    margin-left: auto; 
    margin-right: auto; 
    width: 20%; 
} 

.content { 
    width: 100%; 
    height: 100%; 
} 
#nav-clearfix { 
    width: 100%; 
    height: 50px; 
    background: #02236a; 
} 

#nav { 
    margin-left: 35%; 
    max-width: 100%; 
} 

.nav-pages { 
    padding-top: 10px; 
} 

.nav-pages li:not(.roster) a:after { 
    content: ""; 
    /* width: 0px; */ 
    background: white; 
    margin-left: 8px; 
    position: absolute; 
    height: inherit; 
    color: white; 
    z-index: 5; 
    border: 1px solid white; 
    height: 15px; 
} 

.nav-pages li { 
    float: left; 
    margin-left: 20px; 
} 
#nav { 
    list-style: none; 
} 

#nav a { 
    position: relative; 
    color: #fff; 
    text-decoration: none; 
} 

#nav a:hover { 
    color: #fff; 
} 

#nav a:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #fff; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: akk 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s 
} 

#nav a:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 
nav ul li ul { 
    position: absolute; 
    width: 110px; 
    background: #02236a; 
} 

nav ul li ul li { 
    width: 80px; 
} 

nav ul li ul li a { 
    right: 20px; 
    display: block; 
    padding: 15px; 
    color:#444; 
} 

nav ul li ul.fallback { 
    display: none; 
} 

nav ul li:hover ul.fallback { 
    display: block; 
} 

ul.dropdown li { 
    position: relative; 
} 

ul.dropdown li ul { 
    position: absolute; 
    top: 20px; /* assign the correct value of the top line height */ 
    left: 0px; 
} 

.fallback li{ 
     margin-left: 10px; 

} 

.fallback{ 
    z-index: 10; 
} 

#nav { 
    overflow: hidden; 
} 

a { 
    text-decoration: none; 
} 

li { 
    list-style: none; 
}

$('nav li ul').hide().removeClass('fallback'); 
    $('nav li').hover(
     function() { 
     $('ul', this).stop().slideDown(100); 
    }, 
     function() { 
     $('ul', this).stop().slideUp(100); 
    } 
);

來源

2015-04-07 Blake

爲什麼'：not'追加到'li'元素？它不應該是實際上擁有這個類的'ul'元素嗎？ – billynoah

@billynoah oops，我現在修復它 – Blake

我想你可以選擇從僅僅改變：

.nav-pages li:not(.roster) a:after {

到：

.nav-pages > li > a:after {

，並刪除您可以覆蓋最後的邊界前面的CSS：

.nav-pages > li:last-child > a:after { 
    border: none; 
}

https://jsfiddle.net/17rvm9cg/

關於你提到的有關替代:not的問題，我的做法一般是應用我想要的風格，然後如上圖所示覆蓋它的元素。

來源

2015-04-07 06:35:11 billynoah

它似乎只是將列表更改爲垂直 – Blake

對不起，也許我不明白你想要完成什麼。看看jfiddle並讓我知道。 – billynoah

我一定沒有看過你輸入的代碼的第二部分。它完美的工作，謝謝！ – Blake

不要這給每個ul li a:after風格和設置fallback li a:after到display:none

Fiddle

來源

2015-04-07 06:42:54 Akshay

：不選擇不工作在ul類 - 替代品？

回答

相關問題