Question

可能我完全不懂选择器，我想要的是，当用户点击单选按钮回家时，div应显示，当用户点击单选按钮时，div 2应该显示，它不起作用，所以我删除了代码，问题在哪里，这个代码我接受了div一个显示为home默认选中。但它没有发生，所以我知道问题出在哪里，但我不知道为什么，

请在代码中阅读评论，因为我说哪一行给出了问题提示它的css最后一节，

HTML CODE

<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

Answer 1

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

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

在以下演示中：

每个收音机都在与之关联的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 2

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

Answer 3

我相信对于plus运算符来说，元素必须是下一个兄弟 - 所以在这种情况下.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 4

+选择器：元素+元素选择器用于选择紧接在第一个指定元素之后（而不是在其内部）的元素。

~选择器：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>

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中的加号选择器不起作用

5 个答案:

演示