为什么分区不显示？ [复制]答案

【问题标题】：Why divison does not display? [duplicate]为什么分区不显示？ [复制]
【发布时间】：2020-12-28 14:44:33
【问题描述】：

为什么要划分“hello world！”定位时不显示？如果 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:target div{ display: block; }
需要添加此代码:)

标签： html css target

【解决方案1】：

因为选择器“.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。

【讨论】：