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

Question

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

请阅读代码中的评论，正如我所说哪一行给出了问题提示它是 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>

CSS 代码

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

如果要运行这里的代码就是代码笔linkhttps://codepen.io/arif_suhail_123/pen/KvdWey

Answer 1

我相信要使加号运算符起作用，元素必须是紧邻的下一个兄弟元素 - 因此在这种情况下，.one 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" />
...

Answer 2

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

到select有问题的元素，勾选#home时，可以使用~，也就是一般兄弟select或者：

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

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

Answer 3

+ 是相邻兄弟组合器。这需要：

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

在下面的演示中：

每个收音机都移到了与之关联的 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>

Answer 4

+ Selector : The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.

~ Selector : The element1~element2 selector matches occurrences of element2 that are preceded by element1.

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

.navigation {
  margin-top:20px;
}

.link{
  cursor:pointer;
}

.one,.two{
  display:none;
}

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

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

<div class="container">
  Home: <input  type="radio"  name="option" id="home" checked />
  About: <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>

Answer 5

使用此选择器时元素的顺序很重要。

所以要使用 ~ 运算符，元素应该在第一部分之后。

例如

input[type=radio]:checked ~ label {
    display: none;
}

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>

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

combination selector - Plus selector in css not working

html

css

selector

演示