nth-child（12）选择了工作，但其余的都是

Question

我有一个包含12个元素的列表，在这些元素中我有一个div 我希望实现它每个div都有不同的大小
所以我在li元素上使用nth-child为每个div元素设置不同的大小
但是那个人正在努力工作，其余的n-child workt完美无缺

我的清单：

<ul class="size">
     <li data-radius="1"><div class="circleSize"></div> <br /> 2px </li>
     <li data-radius="2"><div class="circleSize"></div> <br /> 4px </li>                                    <li data-radius="1"><div class="circleSize"></div> <br /> 2px </li>
     <li data-radius="3"><div class="circleSize"></div> <br /> 6px </li>
     <li data-radius="4"><div class="circleSize"></div> <br /> 8px </li>
     <li data-radius="5"><div class="circleSize"></div> <br /> 10px </li>
     <li data-radius="6"><div class="circleSize"></div> <br /> 12px </li>
     <li data-radius="7"><div class="circleSize"></div> <br /> 14px </li>
     <li data-radius="8"><div class="circleSize"></div> <br /> 16px </li>
     <li data-radius="9"><div class="circleSize"></div> <br /> 18px </li>
     <li data-radius="10"><div class="circleSize"></div> <br /> 20px </li>
     <li data-radius="11"><div class="circleSize"></div> <br /> 22px </li>
     <li data-radius="12"><div class="circleSize"></div> <br /> 24px </li>
</ul>

我的css：

.circleSize {
      background-color:black;
      display:inline-block;
      vertical-align: middle;
      border-radius: 50%;
}
.size li:nth-child(1) .circleSize {
      width:2px;
      height:2px;
}
.size li:nth-child(2) .circleSize {
      width:4px;
      height:4px;
}
.size li:nth-child(3) .circleSize {
      width:6px;
      height:6px;
}
.size li:nth-child(4) .circleSize {
      width:8px;
      height:8px;
            }
.size li:nth-child(5) .circleSize {
      width:10px;
      height:10px;
}
.size li:nth-child(6) .circleSize {
      width:12px;
      height:12px;
}
.size li:nth-child(7) .circleSize {
      width:14px;
      height:14px;
}
.size li:nth-child(8) .circleSize {
      width:16px;
      height:16px;
 }
 .size li:nth-child(9) .circleSize {
      width:18px;
      height:18px;
 }
 .size li:nth-child(10) .circleSize {
      width:20px;
      height:20px;
 }
 .size li:nth-child(11) .circleSize {
      width:22px;
      height:22px;
 }
.size li:nth-child(12) .circleSize {
      width:24px;
      height:24px;
}

我的jsfiddle： https://jsfiddle.net/4nvug6og/

Answer 1

它不起作用，因为你有一个额外的 <li data-radius="1"> ，在你的情况下， <li data-radius="12"> 实际上是 {{1 }}

尝试向右滚动并移除额外的 nth-child(13) ，一切都会好的。

工作代码段

li

.circleSize {
      background-color:black;
      display:inline-block;
      vertical-align: middle;
      border-radius: 50%;
}
.size li:nth-child(1) .circleSize {
      width:2px;
      height:2px;
}
.size li:nth-child(2) .circleSize {
      width:4px;
      height:4px;
}
.size li:nth-child(3) .circleSize {
      width:6px;
      height:6px;
}
.size li:nth-child(4) .circleSize {
      width:8px;
      height:8px;
            }
.size li:nth-child(5) .circleSize {
      width:10px;
      height:10px;
}
.size li:nth-child(6) .circleSize {
      width:12px;
      height:12px;
}
.size li:nth-child(7) .circleSize {
      width:14px;
      height:14px;
}
.size li:nth-child(8) .circleSize {
      width:16px;
      height:16px;
 }
 .size li:nth-child(9) .circleSize {
      width:18px;
      height:18px;
 }
 .size li:nth-child(10) .circleSize {
      width:20px;
      height:20px;
 }
 .size li:nth-child(11) .circleSize {
      width:22px;
      height:22px;
 }
.size li:nth-child(12) .circleSize {
      width:24px;
      height:24px;
}