Question

使用纯css，我试图根据所选的子锚点改变列表元素的颜色，如果它是活动的，但是没有实现这一点。我的代码是：

＆＃13;

body > div > div.col-md-2.tabNav {
    background-color: #f3f3f3;
    padding-left: 0;
    padding-right: 0;
}

.col-md-2.tabNav > ul {
    padding-left: 0;
}

.col-md-2.tabNav > ul > p, .col-md-2.tabNav > ul > li {
    padding-left: 20px;
}

.col-md-2.tabNav > ul > li:active, .col-md-2.tabNav > ul > li:focus, .col-md-2.tabNav > ul > li:hover {
    background-color: yellow;
}

＆＃13;

<div class="col-md-2 tabNav">
    <ul class="tabTitle">
        <p>Project tools</p>
        <li class="tabCont"><a href="#/home">Welcome</a></li>
        <li class="tabCont"><a href="#">Experiments</a></li>
        <li class="tabCont"><a href="#">Interview Notes</a></li>
    </ul>
    <ul class="tabTitle">
        <p>Hypothesis worksheets</p>
        <li class="tabCont"><a href="/#/steps">Problem phase</a></li>
        <li class="tabCont"><a href="/#/solutionHyp">Solution phase</a></li>
        <li class="tabCont"><a href="#">Service phase</a></li>
        <li class="tabCont"><a href="#">Growth phase</a></li>                
    </ul>            
</div>

＆＃13;

不确定为什么活动或焦点不是，但悬停是。想法？

另外，基于我的选择器，我不能在纯css中结合活动，焦点，悬停而不是通过逗号分隔？

非常感谢。

Answer 1

active和focus都适用于a标记，而不是li，因为您编写了它。（作为伪选择器，即）

锚父列表对象上的活动样式

1 个答案: