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。