仅将 &:before 应用到菜单的顶层

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 来设置样式，因此在 link:

中的文本之前插入了一个三角形

#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，此处添加了 bootstrap：http://codepen.io/GuerrillaCoder/pen/jPBMqG?editors=110

我想要的效果是只将它插入菜单的顶层，而且如果 class "active" 在那里，三角形将指向下方而不是右侧。

我在兜圈子，我不知道如何删除插入的内容、隐藏它或仅更改顶层的选择器。还试图阻止我的下划线溢出到子菜单中。

有人可以给我一些提示吗？

Answer 1

您应该只将通用规则（那些 can/will 始终影响 :after 伪元素的规则）应用到您的 .nav a 选择器（这是一个广泛的选择器，涵盖 .nav).

中的所有 a 元素

然后，针对特殊行为明确定位您想要的对象：

  .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

仅将 &:before 应用到菜单的顶层

Applying &:before to top level of menu only

css

sass