javascript - :not selector not working on ul class - alternatives?

Question

我制作了标题和下拉导航，并在每个单词之间设置了迷你分隔符 - 最后一个单词除外。但最后一句话，我有一个下拉菜单。我尝试将下拉列表放在一个名为 roster 的 li 类中，并在我有 :not(:last-child) 的地方做了 :not(.roster)。现在就好像我什至没有 not 选择器一样。这是一个 JSFiddle .

所以，回到我的问题...是否有 :not 选择器的替代方案？我读到它不适用于 Internet Explorer 8，但我使用的是 Google Chrome 41.0.2272.118 版。这是我的代码:

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

JS

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

Answer 1

我想你可以改变选择器:

.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 替代方案的问题，我的方法通常是应用我想要的样式，然后在元素上覆盖它，如上所示。