基于元素数量的CSS3选择器

我知道有一种方法可以根据兄弟姐妹的数量选择元素，我尝试了几种方法，但没有成功。基于元素数量的CSS3选择器

例如，我有2种形式中，一个具有3个标签.radio矩阵，而另一个具有5 欲样式基于的次数宽度的 .radio矩阵它出现在.form-matrix。

有人可以帮我吗？谢谢:)

<div class="form-matrix"> 
 
          
 
    <label class="control-label col-md-3"><p>Escolha um lado</p></label> 
 

 
    <div class="col-md-9"> 
 
    
 
     <label class="label-matrix"> 
 
      <p>Esquerdo</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>Direito</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 

 
    </div> 
 
</div> 
 

 
<div class="form-matrix"> 
 
          
 
    <label class="control-label col-md-3"><p>Escolha um lado</p></label> 
 

 
    <div class="col-md-9"> 
 
    
 
     <label class="label-matrix"> 
 
      <p>Esquerdo</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>Direito</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 
     
 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 

 
    </div> 
 
</div>

来源

2017-05-31 Tiago Ramos

你.radio矩阵元素都被嵌套在标签，这使得本次非-不重要的。除非你认为每个这样的标签总是包含一个.radio-matrix，在这种情况下，你可以根据标签的数量来改变输入的样式。 – BoltClock

你真是太棒了BoltClock！我其实想要设计**标签.label-matrix **，而不是输入.radio-matrix –

Google搜索一下，找到[this]（http://lea.verou.me/2011/01/styling-children基础的上，他们的用户号码与-CSS3 /）。 – Code4R7

尝试以下操作：

.label-matrix:first-child:nth-last-child(5) ~ .label-matrix { 
 
    color:red; 
 
} 
 
.label-matrix:first-child:nth-last-child(3) ~ .label-matrix { 
 
    color:blue; 
 
}

<div class="form-matrix"> 
 

 
    <label class="control-label col-md-3"> 
 
    <p>Escolha um lado</p> 
 
    </label> 
 

 
    <div class="col-md-9"> 
 

 
    <label class="label-matrix"> 
 
     <p>Esquerdo</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>Direito</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    </div> 
 
</div> 
 

 
<div class="form-matrix"> 
 

 
    <label class="control-label col-md-3"> 
 
    <p>Escolha um lado</p> 
 
    </label> 
 

 
    <div class="col-md-9"> 
 

 
    <label class="label-matrix"> 
 
     <p>Esquerdo</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>Direito</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    </div> 
 
</div>

来源

2017-05-31 13:18:04 Gerard

基于元素数量的CSS3选择器

回答

相关问题