为什么divison不显示？

问题描述

为什么划分为“hello world！”定位时不显示？我该如何解决这个问题，你好世界留在这个部门？为什么分区中的分区不显示？请帮帮我。

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

解决方法

因为选择器“.tab div”确实针对所有 .tab 元素后代的 div。并且您的“Hello World”位于另一个 div 中，因此 display:none 不适用。你需要的是“.tab > div”，然后只有直接的子元素被隐藏：

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

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator 以获取参考。

html target