.active 时更改第一个孩子 ::before 样式

Question

我有一个如下所示的菜单：http://i.stack.imgur.com/beX6i.png

小三角形是使用 ::before 制作的。当子菜单的第一个子菜单处于活动状态时，我需要将其更改为悬停的颜色（具有从 js 自动添加的 .active 类）

选择器应该是什么样的？类似 .submenu a:first-child.active?

CSS：

.submenu{

        z-index:10;
        position:absolute;
        display:none;
        background:#2b2b2b;         
    }


    .submenu a{

        font-family:'Roboto Slab';
        display:block;
        color:white;
        background:transparent;
        text-decoration:none;
        text-transform:uppercase;
        line-height:58px;
        padding-left:8px;
        padding-right:8px;
        font-weight:bold;
        font-size:14px;
    }

    .submenu a:hover{
        color:#fe4817;
        display:block;
        background-color:#3A3939;
    }

    .submenu a.active{
        color:#fe4817;
        background-color:#3A3939;
    }


    .submenu a:first-child:before,
    .submenu a:first-child::before{
        position:absolute;
        top:-8px;
        left:0;
        content:' ';
        width: 0; 
        height: 0; 
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #2b2b2b;
    }

    .submenu a:first-child:hover:before,
    .submenu a:first-child:hover::before{
        border-bottom: 15px solid #3A3939;
    }

Answer 1

真的很难理解你的问题。但我认为

.submenu a:first-of-type.active:before {
    border-bottom-color:#3a3939;
}

应该做的工作。在这种情况下，:first-of-type 可能比:first-child 更好，因为:first-child 可以是标题或类似的东西，而:first-of-type 只选择第一个锚点。请参阅Selector Reference 了解更多信息。

如果这不起作用，您可以提供 fiddle 我会再看看您的问题。