Question

我有以下html结构，我无法编辑：

<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

我想要的效果是只将其插入菜单的顶层，如果“活跃”类在那里，则三角形将指向下方而不是右侧。

我要绕圈子，我无法弄清楚如何删除插入的内容，隐藏它或改变顶层的选择器。还试图阻止我的下划线溢出到子菜单。

有人可以给我任何提示吗？

Answer 1

您应该只将通用规则（可以/将会影响:after伪元素的规则）应用于.nav a选择器（这是一个广泛的选择器，涵盖所有{ {1}}中的{1}}元素。

然后，具体针对特殊行为的目标：

我使用了后代选择器来确保只有顶级的直接孩子受到影响。

完整示例：

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

将＆amp;：之前应用于顶级菜单

1 个答案: