Question

我有div #post和div #nav。帖子是一个div，与nav无关。问题是#post正在使用#nav链接样式。

有什么问题？

#post{
 width:100%;
 border:1px solid #D4DFE7;
 padding:15px;
 box-sizing: border-box;   
 margin-bottom:10px;
 background-color:#fff;
}
#post img{
 width:100%;
}


#nav a:link, a:visited, a:hover{
 text-decoration: none;
 border:1px solid #ddd;
 background-color:#fff;
 padding:3px;
 padding-left:6px;
 padding-right:6px;
 margin-right:5px;
}
#nav a:hover{
 background-color: #ff0000;
 color:#fff;
}
.selectnav{
 background: #ffff00;
}

<div id=post>
    <a href=#>test</a>
</div>

Answer 1

#nav a:link,
a:visited,
a:hover

应该是：

#nav a:link,
#nav a:visited,
#nav a:hover

否则，:visited和:hover样式将应用于所有a元素，无论它们是否位于#nav元素内。

JSFiddle demo

Answer 2

正确的代码在这里“#nav a：link，#nav a：visited，＃nav a：hover {”

#post{
  width:100%;
  border:1px solid #D4DFE7;
  padding:15px;
  box-sizing: border-box;   
  margin-bottom:10px;
  background-color:#fff;
}
#post img{
  width:100%;
}


#nav a:link, #nav a:visited,#nav a:hover{
   text-decoration: none;
   border:1px solid #ddd;
   background-color:#fff;
   padding:3px;
   padding-left:6px;
   padding-right:6px;
   margin-right:5px;
 }
 #nav a:hover{
    background-color: #ff0000;
    color:#fff;
 }
.selectnav{
   background: #ffff00;
 }

<div id=post>
    <a href=#>test</a>
</div>

一个div的CSS链接干扰另一个？

2 个答案: