css实现tab选项卡

Question

<div class="tab-frame">
  <input type="radio" checked name="tab" id="tab1">
  <label for="tab1">tab1</label>
    
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">tab2</label>
  
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">tab3</label>
 
  <div class="tab">sample content 1</div>
  <div class="tab">sample content 2</div>
  <div class="tab">sample content 3</div>
</div>

css

div.tab-frame input{ display:none;}
div.tab-frame label{ display:block; float:left;padding:5px 10px; cursor:pointer}
div.tab-frame input:checked + label{ background:black; color:white; cursor:default}
div.tab-frame div.tab{ display:none; padding:5px 10px;clear:left}

div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3){ display:block;}

如果在加一层div的话，无法实现tab选项卡的切换,改如何修改css实现上述代码效果

<div class="tab-frame">
 <div class="tab-head">
  <input type="radio" checked name="tab" id="tab1">
  <label for="tab1">tab1</label>
    
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">tab2</label>
  
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">tab3</label>
 </div>
  <div class="tab">sample content 1</div>
  <div class="tab">sample content 2</div>
  <div class="tab">sample content 3</div>
</div>

Answer 1

之前的之所以能实现，是因为~是同级选择器，通过同级元素的状态来判断显示和隐藏。你加了一层，就变成父子关系了。

然而，css没有父元素选择器，css 没有父元素选择器，css 没有父元素选择器

这个光靠css是没法解决的。

补充：关于父选择器： http://www.zhangxinxu.com/wor...