添加目标时CSS焦点无法正常工作

Question

有没有可能用CSS做到这一点，我有一个像这样的DOM

 .nav_bar { background: #c30015; margin-left: 50px; float: left; } .nav_bar > ul { padding: 0; margin: 0; display: flex; border-bottom: thin white solid; position:relative; } .nav_bar ul li { list-style: none; } .nav_bar ul li a { text-decoration: none; color: #ffffff; display: block; border-right: 1px solid #fff; padding: 8px 16px; } .nav_bar ul li a:hover { background: #e6b3a1; text-decoration: none; color: #c3000f; } .nav_bar ul li a:focus , .nav_bar ul li a:active { background: #e6b3a1; text-decoration: none; color: #c3000f; } .down_nav_bar { background: #e6b3a1; margin-left: 34px; float: left; position:absolute !important; left:0; width:100%; display:none; padding: 0; margin: 0; } .down_nav_bar li { list-style: none; display:inline-block; } .down_nav_bar li a { text-decoration: none; color: #c3000f; display: block; padding: 8px 23px 8px 18px; } .down_nav_bar li a:link { text-decoration: none; } .down_nav_bar li a:visited { border-bottom: 2px #c3000f solid; text-decoration: none; } .down_nav_bar li a:hover { border-bottom: 2px #c3000f solid; text-decoration: none; } .down_nav_bar li a:active { border-bottom: 2px #c3000f solid; text-decoration: none; } .down_nav_bar li .active { border-bottom: 2px #c3000f solid; text-decoration: none; } :target { display:block; } 

 <div class="nav_bar"> <ul> <li><a href="#">Post sponsor job</a> </li> <li><a href="#">Applied KOLs</a> </li> <li><a href="#target">Purchase and billing</a> <ul id="target" class="down_nav_bar"> <li><a href="#" class="active">Purchase Plan</a> </li> <li><a href="#">My account</a> </li> <li><a href="">Invoice</a> </li> <li><a href="">How to pay</a> </ul> </li> <li><a href="#">Account Settings</a> </li> </ul> </div> 

重点处理除第3个链接以外的所有链接，我不知道为什么会这样，我还添加了:visited , :active但没有任何效果

Answer 1

通过将id="target"移动到包含href="#target"的锚点并添加以下样式，可以达到预期的结果：

#target:target {
  color: #c3000f;
  background-color: #e6b3a1;
}

#target:target + ul {
  display:block;
}

工作示例：

 .nav_bar { background: #c30015; margin-left: 50px; float: left; } .nav_bar > ul { padding: 0; margin: 0; display: flex; border-bottom: thin white solid; position:relative; } .nav_bar ul li { list-style: none; } .nav_bar ul li a { text-decoration: none; color: #ffffff; display: block; border-right: 1px solid #fff; padding: 8px 16px; } .nav_bar ul li a:hover, .nav_bar ul li a:focus, .nav_bar ul li a:active, #target:target { background: #e6b3a1; text-decoration: none; color: #c3000f; } .down_nav_bar { background: #e6b3a1; margin-left: 34px; float: left; position:absolute !important; left:0; width:100%; display:none; padding: 0; margin: 0; } .down_nav_bar li { list-style: none; display:inline-block; } .down_nav_bar li a { text-decoration: none; color: #c3000f; display: block; padding: 8px 23px 8px 18px; } .down_nav_bar li a:link { text-decoration: none; } .down_nav_bar li a:visited { border-bottom: 2px #c3000f solid; text-decoration: none; } .down_nav_bar li a:hover { border-bottom: 2px #c3000f solid; text-decoration: none; } .down_nav_bar li a:active { border-bottom: 2px #c3000f solid; text-decoration: none; } .down_nav_bar li .active { border-bottom: 2px #c3000f solid; text-decoration: none; } #target:target + ul { display:block; } 

 <div class="nav_bar"> <ul> <li><a href="#">Post sponsor job</a> </li> <li><a href="#">Applied KOLs</a> </li> <li><a id="target" href="#target">Purchase and billing</a> <ul class="down_nav_bar"> <li><a href="#" class="active">Purchase Plan</a> </li> <li><a href="#">My account</a> </li> <li><a href="">Invoice</a> </li> <li><a href="">How to pay</a> </ul> </li> <li><a href="#">Account Settings</a> </li> </ul> </div>