我想将CSS背景颜色应用到第3个孩子3到10
<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; }I want to apply CSS background color to nth child 3 to 10
<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>This works but is there any simpler way in CSS?
.roundperiodbg:nth-child(3), .roundperiodbg:nth-child(4), ..... .roundperiodbg:nth-child(10) { background : green; }最满意答案
你可以使用两个: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
You can use two :nth-child() selectors to create a range like this:
.roundperiodbg:nth-child(n+3):nth-child(-n+10){ background : green; }See this demo fiddle.
Explanation:
:nth-child(n+3) selects all elements with an index equal or great than 3
------ n | i ------ 0 | 3 ------ 1 | 4 ------ 2 | 5 ------ 3 | 6 ------ ..| ..:nth-child(-n+10) selects all elements with an index equal or lower than 10
------ n | i ------ 0 | 10 ------ 1 | 9 ------ 2 | 8 ------ 3 | 7 ------ ..| 1When you apply both in the same CSS rule the element would have to match both conditions therefore it only applies to elements with index between 3 and 10.
Also you can check out this link for more cool uses of the :nth-child() selector. Thanks @Rajaprabhu
更多推荐
发布评论