提问者:小点点

为什么不显示Division?[副本]


为什么要划分“你好,世界!”目标时不显示?hello world还留在分部,我该怎么解决这个问题?为什么组织中的组织不显示?请帮帮我。

null

<!DOCTYPE html>
<html>
<head>
<style>
.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
</style>
</head>
<body>

<div class="tab">

<a href="#link1">Link 1</a>   
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <div>
  <p>Hello World!</p>
  </div>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

</div>

</body>
</html>

null


共1个答案

匿名用户

因为选择器“。tab div”确实以。tab元素的后代的所有div为目标。您的“Hello World”在另一个div中,因此显示:None适用。您需要的是“.tab&>div",那么只隐藏直接的子元素:

null

<!DOCTYPE html>
<html>
<head>
<style>
.tab > div {
  display: none;
}

.tab div:target {
  display: block;
}
</style>
</head>
<body>

<div class="tab">

<a href="#link1">Link 1</a>   
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <div>
  <p>Hello World!</p>
  </div>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

</div>

</body>
</html>