html - 在 .active 时更改 first child::before 样式

Question

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

小三 Angular 形是使用::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 只选择第一个 anchor 。参见 Selector Reference了解更多信息。

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