组合选择器 - CSS 中的加号选择器不起作用答案

【问题标题】：combination selector - Plus selector in css not working组合选择器 - CSS 中的加号选择器不起作用
【发布时间】：2017-07-28 02:47:20
【问题描述】：

可能是我不完全理解 plus 选择器，我想要什么，当用户单击单选按钮主页时，应该显示 div 一个，当用户单击单选按钮时，应该显示 div 两个，但它不起作用，所以我去掉了代码，问题出在哪里，我接受了这个代码，我接受了 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>

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

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

【问题讨论】：

标签： html css selector

【解决方案1】：

.container 不是#home 的兄弟。

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

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

【讨论】：

【解决方案2】：

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

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

在下面的演示中：

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

【讨论】：

@user2860957 嗯，你接受的那个不能正常工作。如果您测试我的答案，您会看到 home 和 about 都会切换。您接受的答案不会切换。
你是对的，我接受的答案不要切换，但我认为不必切换，因为我也将添加这行代码，#about:checked ~ .display > .two{ display:block; }my主要问题是，我无法选择，根据选中的按钮，接受的解决方案是这样做的，这就是我剥离代码的原因，并且在问题中也提到，重新加载页面后，它应该将我的 div 显示为 div默认选中，如果我让您感到困惑，请见谅。你的答案很好，这就是为什么要投票，但接受的解决方案是我正在寻找的解决方案
@zer00ne 这不是问题的一部分，但是好的，我更新了我的答案只是因为...... :)
@ChavaG "...当用户单击单选按钮时，应该显示 div 两个，它不起作用，" 是原始问题的一部分。我的答案默认显示主页。我的回答将根据要求显示与标签关联的 div。感谢您的支持，我只想让您知道答案并不完全正常。其他用户会看到接受的答案，但不会像您那样精明。 ;)
@ChavaG 非常清楚，我的朋友。先生，编码愉快。

【解决方案3】：

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

【讨论】：

【解决方案4】：

+ Selector : element+element 选择器用于选择紧跟在第一个指定元素之后（而不是内部）放置的元素。

~ 选择器：element1~element2 选择器匹配出现在 element1 之前的 element2。

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

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

【讨论】：

【解决方案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>

【讨论】：