将CSS背景颜色应用于第3个孩子3到10的最简单方法

Question

我想将CSS背景颜色应用于第3个孩子的第3个孩子

    <div class="roundperiodbg" id="roundPeriod1" title="PERIOD 1"></div>
    <div class="roundperiodbg" id="roundPeriod2" title="PERIOD 1"></div>

    <div class="roundperiodbg" id="roundPeriod3" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod4" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod5" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod6" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod7" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod8" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod9" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod10" title="PERIOD 2"></div>

    <div class="roundperiodbg" id="roundPeriod11" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod12" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod13" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod14" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod15" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod16" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod17" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod18" title="PERIOD 3"></div>

这有效,但在CSS中有任何更简单的方法吗？

.roundperiodbg:nth-child(3), .roundperiodbg:nth-child(4), ..... .roundperiodbg:nth-child(10) {
        background : green;

}

Answer 1

您可以使用两个:nth-child()选择器来创建这样的范围:

.roundperiodbg:nth-child(n+3):nth-child(-n+10){
     background : green;
}

看这个演示小提琴.

说明:

:nth-child(n+3) 选择索引等于或大于3的所有元素

------
n | i
------
0 | 3
------
1 | 4
------
2 | 5
------
3 | 6
------
..| ..

:nth-child(-n+10) 选择索引等于或小于10的所有元素

------
n | i
------
0 | 10
------
1 | 9
------
2 | 8
------
3 | 7
------
..| 1

当您在同一CSS规则中应用两者时,元素必须匹配两个条件,因此它仅适用于索引在3到10之间的元素.

此外,您可以查看此链接,以获得更多:nth-child()选择器的酷炫用途.谢谢@Rajaprabhu