基于元素数量的CSS3选择器

Question

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

例如，我有2个表单，一个有3个标签 .radio-matrix ，另一个有5个。 我想根据 .form-matrix 中出现的次数来设置 .radio-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>

Answer 1

尝试以下方法：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;