只是关于我打算做什么的背景知识。目前我正在尝试创建一个纯粹在css上运行的选项卡面板。当用户单击第一个选项卡时，它将显示选项卡1内容，依此类推选项卡2和选项卡3.在选项卡面板上，我还需要在选项卡周围进行div换行。
使用单选按钮创建选项卡。目前，当我在选项卡上包装div时，当我单击选项卡时，不会显示任何内容，但如果我删除选项卡周围的div换行，它将起作用。
希望结果将在所有选项卡上显示外部div，并且在单击选项卡时将显示内容。
这是小提琴：https://jsfiddle.net/mathiasloy/hpdqhdw8/
*, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box;}
body {background: #2F2556; color: #B9B5C7; font: 14px 'Open Sans', sans-serif;}
/* You can safely remove the next two lines */
.top { padding-right: 20px; background: #261F41; text-align: right; }
a { color: rgba(255,255,255,0.6); text-transform: uppercase; text-decoration: none; line-height: 42px; }
h1 {padding: 100px 0; font-weight: 400; text-align: center;}
p {margin: 0 0 20px; line-height: 1.5;}
.main {margin: 0 auto; min-width: 100%; max-width: 100%;}
.content {background: #fff; color: #373737;}
.content > div {display: none; padding: 20px 25px 5px;}
.overall-nav {width: 100%; background-color: white; padding-left: 40px; padding-right: 40px; border-radius: 50px}
input {display: none;}
label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center; width: 33%; border-radius: 50px }
label:hover {color: #fff; cursor: pointer;}
input:checked + label {background: #ed5a6a; color: #fff;}
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3
{
display: block;
}
@media screen and (max-width: 400px) { label {padding: 15px 10px;} }<div class="main">
<div class="overall-nav">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">New York</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">London</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Mumbai</label>
</div>
<div class="content">
<div id="content1">
<p>
New York – referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway for legal immigration to the United States and one of the most populous urban agglomerations in the world. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment.
<p>
Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
</p>
</div>
<div id="content2">
<p>
London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
</p>
<p>
London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core.
</p>
</div>
<div id="content3">
<p>
Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
</p>
<p>
Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
</p>
</div>
<div id="content4">
<p>
Tokyo, officially Tokyo Metropolis, is one of the 47 prefectures of Japan. Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
</p>
<p>
Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo.
</p>
</div>
</div>
</div>
答案 0 :(得分：1)
您需要在树中选择切换选项卡的选择器。由于代字号与同一级别的元素一起使用 https://codepen.io/ssstelllo/pen/wPMQyp
#tab2:checked ~ .content #content2,
答案 1 :(得分：1)
试试这个。
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #2F2556;
color: #B9B5C7;
font: 14px 'Open Sans', sans-serif;
}
/* You can safely remove the next two lines */
.top {
padding-right: 20px;
background: #261F41;
text-align: right;
}
a {
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
text-decoration: none;
line-height: 42px;
}
h1 {
padding: 100px 0;
font-weight: 400;
text-align: center;
}
p {
margin: 0 0 20px;
line-height: 1.5;
}
.main {
margin: 0 auto;
min-width: 100%;
max-width: 100%;
}
.content {
background: #fff;
color: #373737;
}
.content > div {
display: none;
padding: 20px 25px 5px;
}
.overall-nav {
width: 100%;
background-color: white;
padding-left: 40px;
padding-right: 40px;
border-radius: 50px
}
input {
display: none;
}
nav ul{
float:left;
width:100%;
}
.clear{
clear:both;
}
nav li {
float: left;
width: 33.33%;
border-radius: 50px;
list-style: none;
}
nav li label {
padding: 15px 25px;
font-weight: 600;
text-align: center;
display: block;
}
nav li:hover {
color: #fff;
cursor: pointer;
}
#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3 {
background: #ed5a6a;
color: #fff;
}
#tab1:checked ~ .content .tab1,
#tab2:checked ~ .content .tab2,
#tab3:checked ~ .content .tab3 {
display: block;
}
@media screen and (max-width: 400px) {
label {
padding: 15px 10px;
}
}<div class="main">
<input id="tab1" type="radio" name="tabs" checked="checked">
<input id="tab2" type="radio" name="tabs">
<input id="tab3" type="radio" name="tabs">
<nav>
<ul>
<li class="tab1">
<label for="tab1">New York</label>
</li>
<li class="tab2">
<label for="tab2">London</label>
</li>
<li class="tab3">
<label for="tab3">Mumbai</label>
</li>
</ul>
<div class="clear"></div>
</nav>
<div class="content">
<div class="tab1">
<p>
New York – referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway for legal immigration to the United States and one of the most populous urban agglomerations in the world. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment.
<p>
Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
</p>
</div>
<div class="tab2">
<p>
London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
</p>
<p>
London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core.
</p>
</div>
<div class="tab3">
<p>
Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
</p>
<p>
Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
</p>
</div>
</div>
</div>