组合选择器 - css 中的 Plus 选择器不起作用

Question

可能是我不完全理解加上选择器，我想要什么，当用户点击单选按钮主页时，div 一应该显示，当用户点击单选按钮时，div 2 应该显示，它不起作用，所以我剥离了代码，问题出在哪里，有了这个代码，我接受了第一个div来显示，因为默认情况下选中了home。但它没有发生，所以我知道问题出在哪里，但我不知道为什么，

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

代码

<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;
}

如果你想在这里运行代码是代码笔链接https://codepen.io/arif_suhail_123/pen/KvdWey

Answer 1

.container不是 的兄弟姐妹#home。

要选择有问题的元素，当#home被选中时，您可以使用~，这是一般的兄弟选择器：

#home:checked ~ .display > .one

#home:checked ~ .display > .one

.navigation {margin-top:20px;}
.link {cursor:pointer;}

.one, .two {
  display:none;
}
    
#home:checked ~ .display > .one {
  display:block;
}

#about:checked ~ .display > .two {
  display: block;
}

Answer 2

是+相邻同级组合器。这需要：

1. 成为兄弟姐妹的元素
2. 左边的选择器+是第一个定位的元素
3. 右侧的选择器+是后面的选择器。
4. 它们之间不能有其他元素。

在下面的演示中：

• 每个无线电都被移动到与其关联的 div 前面。
• 每个收音机都是display:none因为没有必要显示它们，因为界面就是标签。

演示

input[name='option'],
.one,
.two {
  display: none
}

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

#about:checked+.two {
  display: block;
}

<div class="container">



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

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