Question

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

小三角形是使用::之前制作的。当子菜单的第一个子项处于活动状态时，我需要将其更改为悬停的颜色（具有自动从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我会再看一下您的问题。

改变第一个孩子::在样式之前.active

1 个答案: