Question

我已经制作了标题并下拉导航并且在每个单词之间都有微小的分隔符 - 例外是最后一个单词。但最后一句话，我有一个下拉列表。我尝试将下拉列表放在名为roster的li类中，然后在我:not(.roster)的{{1}}处进行了操作。现在好像我甚至没有那里没有选择器。这是JSFiddle。

所以，回到我的问题......是否有任何替代方案：不是选择器？我已经读过它在Internet Explorer 8上不起作用，但我使用的是谷歌Chrome版本41.0.2272.118。这是我的代码：

相关HTML

:not(:last-child)

CSS

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

JS

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

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

Answer 2

这样做会给每个ul li a:after样式，并将fallback li a:after设置为display:none

Fiddle

：没有选择器不工作在ul类 - 替代品？

2 个答案: