Select multiple child elements using nth-child

2019-06-19 16:41发布

问题:

div div p:nth-child(1 to 5)

How can I select multiple numbers with the nth-child, so I get the child elements 1 to 5 without having to write:

div div p:nth-child(1),
div div p:nth-child(2),
div div p:nth-child(3),
div div p:nth-child(4),
div div p:nth-child(5) {

}

So it should look like this:

div div p:nth-child(1 to 5)

回答1:

div div p:nth-child(-n+5){

}

This will select the first 5 children.



回答2:

div div p:nth-child(n+1):nth-child(-n+5){

}

will select elements 1 to 5



回答3:

I've attached a link to a JSFiddle that should do what you are asking, but it should look something like this:

li:nth-child(-n+5){
    color: red;
}

http://jsfiddle.net/p2aBc/1/



回答4:

div div p:nth-child(1),
div div p:nth-child(2),
div div p:nth-child(3),
div div p:nth-child(4),
div div p:nth-child(5){

}

Or

div div p:nth-child(-n+5){

}