为什么要划分“你好,世界!”目标时不显示?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
因为选择器“。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>