基於元素數量的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選擇器

回答

相關問題