当我们添加目标时，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>