css选择器不会在选定的ID上设置不透明度

Question

我正在试验一个由单选按钮组成的选项卡式导航。 我的问题是，当我点击标签选定的id的不透明度没有改变，所以内容不可见。

我的HTML代码：

<div id="container"> 

<div id="tabs">  
    <input id="tab-1" type="radio" name="tab-group" checked="checked" /> 
    <label for="tab-1">Tab 1</label> 
    <input id="tab-2" type="radio" name="tab-group" /> 
    <label for="tab-2">Tab 2</label> 
    <input id="tab-3" type="radio" name="tab-group" /> 
    <label for="tab-3">Tab 3</label> 
</div> 

<div id="content"> 

    <div id="content-1"> 
     <form> 
      First name:<br> 
      <input type="text" name="firstname"><br> 
      Last name:<br> 
      <input type="text" name="lastname"> 
     </form> 
    </div> 

    <div id="content-2"> 
     <p class="column-left"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
     <p class="column-right"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 

    <div id="content-3"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
     <ul> 
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing it.</li> 
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing it.</li> 
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
     </ul> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
    </div> 
</div> 

我的CSS代码：

* { 
    font-family: Arial, sans; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 


#container { 
    padding-top: 6em; 
    margin: 0 auto; 
    width: 50%; 
} 

#tabs input { 
    height: 2.5em; 
    visibility: hidden; 
} 

#tabs label { 
    background: #f9f9f9; 
    border-radius: .25em .25em 0 0; 
    color: red; 
    cursor: pointer; 
    display: block; 
    float: left; 
    font-size: 1em; 
    height: 2.5em; 
    line-height: 2.5em; 
    margin-right: .25em; /*space between tabs*/ 
    padding: 0 1.5em; 
    text-align: center; 
} 

#tabs input:hover + label { 
    background: #ddd; 
    color: lawngreen; 
} 

#tabs input:checked + label { 
    background: black; 
    color: white; 
    position: relative; 
    z-index: 6; 
} 

#content { 
    background: red; 
    border-radius: 0 .25em .25em .25em; 
    min-height: 20em; 
    position: relative; 
    width: 100%; 
    z-index: 5; 
} 

#content div { 
    opacity: 0; 
    padding: 1.5em; 
    position: absolute; 
    z-index: -100; 
    transition: all linear 0.1s; 
} 

#tabs input#tab-1:checked ~ #content #content-1, 
#tabs input#tab-2:checked ~ #content #content-2, 
#tabs input#tab-3:checked ~ #content #content-3 { 
    opacity: 1;  
    z-index: 100; 
} 


input.visible { 
    visibility: visible !important; 
} 

我认为问题出在3个选择行“#tabs输入＃标签-1：检查〜#content＃content-1“

我试图用不同的语法重写这些行bu没有任何作用。

请帮忙。

Answer 1

* { 
 
    font-family: Arial, sans; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 

 
#container { 
 
    padding-top: 6em; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
} 
 

 
#tabs input { 
 
    height: 2.5em; 
 
    visibility: hidden; 
 
} 
 

 
#tabs label { 
 
    background: #f9f9f9; 
 
    border-radius: .25em .25em 0 0; 
 
    color: red; 
 
    cursor: pointer; 
 
    display: block; 
 
    float: left; 
 
    font-size: 1em; 
 
    height: 2.5em; 
 
    line-height: 2.5em; 
 
    margin-right: .25em; /*space between tabs*/ 
 
    padding: 0 1.5em; 
 
    text-align: center; 
 
} 
 

 
#tabs input:hover + label { 
 
    background: #ddd; 
 
    color: lawngreen; 
 
} 
 

 
#tabs input:checked + label { 
 
    background: black; 
 
    color: white; 
 
    position: relative; 
 
    z-index: 6; 
 
} 
 

 
#content { 
 
    background: red; 
 
    border-radius: 0 .25em .25em .25em; 
 
    min-height: 20em; 
 
    position: relative; 
 
    width: 100%; 
 
    z-index: 5; 
 
    overflow-y: auto; 
 
} 
 

 
#content div { 
 
    opacity: 0; 
 
    padding: 1.5em; 
 
    position: absolute; 
 
    z-index: -100; 
 
    transition: all linear 0.1s; 
 
    
 
} 
 

 
#tabs input#tab-1:checked ~ #content div#content-1, 
 
#tabs input#tab-2:checked ~ #content div#content-2, 
 
#tabs input#tab-3:checked ~ #content div#content-3 { 
 
    opacity: 1;  
 
    z-index: 1000; 
 
} 
 

 

 
input.visible { 
 
    visibility: visible !important; 
 
}

<div id="container"> 
 

 
<div id="tabs">  
 
    <input id="tab-1" type="radio" name="tab-group" checked="checked" /> 
 
    <label for="tab-1">Tab 1</label> 
 
    <input id="tab-2" type="radio" name="tab-group" /> 
 
    <label for="tab-2">Tab 2</label> 
 
    <input id="tab-3" type="radio" name="tab-group" /> 
 
    <label for="tab-3">Tab 3</label> 
 

 

 
<div id="content"> 
 

 
    <div id="content-1"> 
 
     <form> 
 
      First name:<br> 
 
      <input type="text" name="firstname"><br> 
 
      Last name:<br> 
 
      <input type="text" name="lastname"> 
 
     </form> 
 
    </div> 
 

 
    <div id="content-2"> 
 
     <p class="column-left"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
 
     <p class="column-right"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 

 
    <div id="content-3"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
 
     <ul> 
 
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing it.</li> 
 
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing it.</li> 
 
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
     </ul> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
 
    </div> 
 
</div> 
 

 
</div>

你可以，如果你稍微改变你的HTML。

基本上，使#content兄弟姐妹#tabs，我搬到#tabs结束div到最后。希望这可以帮助。

检查小提琴here

Answer 2

与#content匹配的div不是input中的任何一个的兄弟。这是他们的亲本的兄弟姐妹。

我的阿姨不是我的姐姐。

您无法使用CSS选择器从输入链接到#content-X。 There is no parent combinator。

您需要为此使用JavaScript。