Html 组合选择器-css中的Plus选择器不工作

可能是我不太明白加上选择器， 我想要的是，当用户单击单选按钮home时，应该会显示div one， 当用户点击单选按钮about时，应该会显示div two，它不起作用， 所以我去掉了代码，问题出在哪里，用这个代码我接受了div one，默认情况下显示为home。但是它没有发生，所以我知道问题出在哪里，但我不知道为什么

请阅读代码中的注释，正如我所说的，哪一行给出了问题提示，这是css的最后一部分

HTML代码

<div class="container">
            <input  type="radio"  name="option" id="home" checked />
            <input  type="radio"  name="option" id="about" />

            <div class="navigation">
                <label for="home"  class="link">Home</label>
                <label for="about" class="link">About Us</label>
            </div>

            <div class="display">
                <div class="one">
                <h3>This is first</h3>
                </div>

                <div class="two">
                <h3>This is second</h3>
                </div>
            </div>    
</div>

.navigation {margin-top:20px;}
.link{cursor:pointer;}
/*making div display*/
.one,.two{
    display:none;
}

/*
###This line is not working## want to display div, if user click on radio
button
*/
#home:checked +.container > .one{
    display:block;
}

---

如果您想运行代码，这里是代码笔链接，我相信plus操作符要工作，元素必须是下一个兄弟元素-因此在这种情况下。一个div必须立即跟随#home标签，css必须是：

#home:checked + .one{
    display:block;
}

html：

<div class="container">
<input  type="radio"  name="option" id="home" checked />
    <div class="one">
       <h3>This is first</h3>
    </div>
<input  type="radio"  name="option" id="about" />
...

这是第一次
...

.container

不是

#home

的兄弟姐妹

要选择有问题的元素，当选中

#home

时，可以使用

~

，这是通用同级选择器：

#home:checked ~ .display > .one

.navigation{margin top:20px；}
.link{cursor:pointer；}
.1、.2{
显示：无；
}
#主页：选中~.display>.one{
显示：块；
}
#关于：选中~.display>.two{
显示：块；
}

家
关于我们
这是第一次
这是第二个
这个
+
是相邻的兄弟组合词。这要求：

元素是兄弟元素
+
左侧的选择器是第一个定位的元素
+
右侧的选择器是后面的选择器
它们之间不能有其他元素
在以下演示中：


每台收音机都被移动到与之相关的div的前面
每个收音机都是
display:none
，因为界面是标签，所以不需要显示它们

演示

input[name='option']，
.1，
.二{
显示：无
}
#主页：选中+.1{
显示：块；
}
#关于：选中+.2{
显示：块；
}

家
关于我们
这是第一次
这是第二个

+
选择器：元素+元素选择器用于选择紧跟在第一个指定元素之后（而非内部）的元素

~
选择器：element1~element2选择器与前面有element1的element2匹配

因此，您必须使用
~
而不是
+


.navigation{
边缘顶部：20px；
}
.链接{
光标：指针；
}
.1、.2{
显示：无；
}
#主页：选中~.display>.one{
显示：块；
}
#关于：选中~.display>.two{
显示：块；
}

主页：
关于：
家
关于我们
这是第一次
这是第二个
使用此选择器时，元素的顺序很重要

因此，要使用~运算符，元素应位于第一部分之后

前

Html应为：

<div class="radio-groupe">
    <input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
    <label for="choice-2">More</label>
</div>


更多

而不是：

<div class="radio-groupe">
    <label for="choice-2">More</label>
    <input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
</div>


更多
@user2860957嗯，您接受的那个不能正常工作。如果你测试我的答案，你会看到home和about都会切换。您接受的答案不会切换。您是对的，我接受的答案不会切换，但我认为它不必切换，因为我也要添加这行代码，
#about:checked~.display>.two{display:block；}
我的主要问题是，根据checked按钮，我无法选择，公认的解决方案就是这样做的，这就是我删除代码的原因，在问题中也提到过，在重新加载页面后，它应该显示我的div one，因为默认情况下选中了div，如果我混淆了您的意思，很抱歉。你的答案是好的，这就是为什么投了赞成票，但被接受的解决方案是我正在寻找的解决方案for@zer00ne这不是问题的一部分，但好吧，我更新了我的答案只是因为…：）@ChavaG“…当用户单击单选按钮about时，应该显示div two，它不起作用”，这是原始问题的一部分。默认情况下，我的答案显示为“主页”。我的回答将按照要求显示与标签相关的div。感谢你的支持，我只是想让你知道答案并不完全有效。其他用户会看到被接受的答案，但不会像你那样精明。；）@查瓦格水晶般清澈，我的朋友。祝您愉快，先生。
<div class="radio-groupe">
    <label for="choice-2">More</label>
    <input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
</div>