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

我试图更改包含href的div的背景颜色。我试图用a:target & a:visited属性来做到这一点。这似乎并不奏效。我显然不是在瞄准正确的事情。用于更改div的颜色的CSS包含href

我有以下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; 
}

来源

2016-03-27 usert4jju7

为什么'一：target'而不是'一：active'？ – Oisin

我想改变div的颜色。对不起，我应该提到 – usert4jju7

“你点击''href'”是什么意思？你的意思是用户已经访问过的链接，或者在某些'mousedown'事件中改变了父元素的背景颜色？ –

这应该做的伎俩

: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>

来源

2016-03-27 00:26:51 Maak

谢谢Maak。 'nav'是一个浮动的侧边栏。当它离开视野时，亮点消失。下次侧边栏浮动时，我希望颜色保持不变。这可能吗？ – usert4jju7

我刚更新了我的帖子。我希望现在适合你。 – Maak

谢谢Maak。不是：（ – usert4jju7

最简单的方法是删除div的，因为他们覆盖你定义的标记a：visited和a：hover。所以如果你只是改变背景颜色，因为设置div的父'a'的背景颜色将覆盖div的背景。

我以为你想用.current类设置来突出显示导航项。

.current{ 
 
    background-color: #FFFF00; 
 
}

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

来源

2016-03-27 01:54:39 Pitt

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

回答

相关问题