Как работают вкладки CSS-радио?

Question

Может ли кто-нибудь объяснить, как работает последняя часть кода? В частности:

[type=radio]:checked { 
} 

[type=radio]:checked ~ .content { 
z-index: 1; 
} 

Я только начинаю с CSS как NEWB и хотел, чтобы попытаться создать несколько интерактивных вкладок CSS; которые заставляют меня взглянуть на какой-то существующий код. Излишне говорить, что это оставило меня в замешательстве.

Почему стоит [type=radio]:checked? В скобках было z-index: 2;, но я взял это, и код все еще работает нормально; хотя при попытке и удалении [type=radio]:checked все вместе код ломается. Зачем? В настоящее время он не имеет свойств.

[type=radio]:checked ~ .content было [type=radio]:checked ~ label ~ .content, но я достал ярлык и все еще работает нормально. Почему это когда-либо понадобилось?

HTML:

<div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab One</label> 

     <div class="content"> 
      tab#1 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab Two</label> 

     <div class="content"> 
      tab#2 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab Three</label> 

     <div class="content"> 
      tab#3 
     </div> 
    </div> 

</div> 
</html> 

CSS:

.tabs { 
    position: relative; 
    height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 

} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 

[type=radio]:checked { 
} 

[type=radio]:checked ~ .content { 
z-index: 1; 
} 

Answer 1

Последняя часть вашего CSS:

[type=radio]:checked { 
} 

[type=radio]:checked ~ .content { 
    z-index: 1; 
} 

Это дает z-index к содержимому класса. Поскольку нажата только одна вкладка, она дает z-index только одному классу контента и отображает его. (Поскольку у других нет z-index)

Если вы хотите увидеть, как это работает, добавьте z-index в класс контента, скажем 10, в ваш CSS и посмотрите, как он становится все отвратительным. Теперь, поскольку этот код дает только z-index: 1;, он не отображается правильно, так как в этом примере у всех есть 10. Теперь перейдите к приведенному выше фрагменту кода и поместите z-index: 11; и смотрите, как он работает правильно. Поскольку только один получает высокий z-index: 11;, он становится отображающим.

Если вы не знаете, что означает [type=radio]:checked, это относится к состоянию активного состояния или щелчка для этого радиовхода.

Эта часть кода: [type=radio]:checked ~ label ~ .content позволяет более четко и точно выбирать элемент DOM. Он будет работать без него, потому что .content ниже метки radio. Он будет применяться только к элементу, который равен 1. input radio> 2. label> 3. .content.

Если вы также не знаете, что делает z-index, тогда дайте мне знать, и я затормозите это.