CSS-Selektor setzt die Deckkraft nicht auf ausgewählte ID

Question

Ich experimentiere mit einer Tab-Navigation aus Radio-Buttons. Mein Problem ist, dass wenn ich auf die Registerkarte klicke, die Deckkraft der ausgewählten ID nicht geändert wird, so dass der Inhalt nicht sichtbar wird.

Mein HTML-Code:

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

Mein CSS-Code:

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

denke ich, das Problem mit den Eingang # tab-1 #tabs Auswahlleitungen“3 liegt ausgewählt ~ #content # content-1 "

Ich habe versucht, diese Zeile in unterschiedlicher Syntax neu zu schreiben, aber nichts funktioniert.

Bitte helfen.

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>

Sie können, wenn Sie leicht Ihre HTML ändern.

Grundsätzlich, #content Geschwister #tabs zu machen, bewegte ich #tabs Schließen div bis zum Ende. Hoffe das hilft.

Überprüfen Sie die Geige here

Answer 2

Das div, das #content entspricht, ist kein Geschwister eines der input s. Es ist ein Geschwister von ihrem Elternteil.

Meine Tante ist nicht meine Schwester.

Sie können keine Verknüpfung von den Eingaben zu #content-X mit CSS-Selektoren zeichnen. There is no parent combinator.

Sie müssten JavaScript dafür verwenden.