jquery - 用于更改包含 href 的 div 颜色的 CSS

Question

我正在尝试更改包含 href 的 div 的背景颜色。我正在尝试使用 a:target & a:visited 属性来做到这一点。这似乎不起作用。我显然没有瞄准正确的目标。

我有下面的 nav 结构。

    <nav id="main-nav">
        <a href="#" ><div></div></a>
        <a href="#"  id="p1" class="current"><div>OPTION - 1</div></a>
        <a href="#" id="p2"><div>OPTION - 2</div></a>
        <a href="#" id="p3"><div>OPTION - 3</div></a>
        <a href="#" id="p4"><div>OPTOIN - 4</div></a>
        <a href="#" id="p5"><div>OPTION - 5</div></a>       
    </nav>

下面是与上面相关的CSS

#main-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    max-width: 300px;
    width: 100%;
    z-index: 5;
    top: 0;
    left: -300px; /* changed */
    position: fixed;
    background: #222;
    text-align: center; 
}

#main-nav a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: white;
    border-bottom: 1px solid #555555;
    text-decoration: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    text-align: left;
    max-height: 100px;
}


#main-nav a:hover, #main-nav a.current {
    background: #3c3c3c; 
}

#main-nav a:target {
    background: yellow; 
}

有什么办法可以实现吗？

已更新

        <nav id="main-nav">
            <a href="#p0" ><div></div></a>
            <a href="#p1"  id="p1" class="current"><div>&nbsp DASHBOARD</div></a>
            <a href="#p2" id="p2"><div>OPTION - 1</div></a>
            <a href="#p3" id="p3"><div>OPTION - 2</div></a>
            <a href="#p4" id="p4"><div>OPTION - 3</div></a>
            <a href="#p5" id="p5"><div>OPTION - 4</div></a>     
        </nav>

:target div {
    background: yellow;
}

Answer 1

这应该可以解决问题

:target div {
    background: yellow;
}

<nav id="main-nav">
    <a href="#p1"  id="p1" class="current"><div>OPTION - 1</div></a>
    <a href="#p2" id="p2"><div>OPTION - 2</div></a>
    <a href="#p3" id="p3"><div>OPTION - 3</div></a>
    <a href="#p4" id="p4"><div>OPTOIN - 4</div></a>
    <a href="#p5" id="p5"><div>OPTION - 5</div></a>       
</nav>