css CSS nth child http://css-tricks.com/useful-nth-child-recipies/

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css CSS nth child http://css-tricks.com/useful-nth-child-recipies/相关的知识,希望对你有一定的参考价值。

/*
Select Only the Fifth Element

To select the first element, you can use :first-child, or I bet you can guess 
how to alter the above to do it as well.
*/
li:nth-child(5) {
    color: green;   
}

/*
Select All But The First Five

If there were more than 10 elements here, it would select all of them beyond 5.
*/

li:nth-child(n+6) {
    color: green;   
}

/*
Select Only The First Five
*/

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

/*
Select Every Fourth, Starting At The First
*/

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

/*
Select Only Odd or Even
*/

li:nth-child(odd) {
    color: green;   
}

li:nth-child(even) {
    color: green;   
}

/*
Select The Last Element

Selects the 10th because we have 10 elements here, but if there was 8 it would 
select the 8th, or if there were 1,290 it would select the 1,290th.
*/

li:last-child {
    color: green;
}

/*
Select the Second to Last Element

Selects the 9th because we have 10 elements here, but if there were 30 elements 
it would select the 29th.
*/

li:nth-last-child(2) {
    color: green;
}

以上是关于css CSS nth child http://css-tricks.com/useful-nth-child-recipies/的主要内容,如果未能解决你的问题,请参考以下文章

jQuery :odd 和 :nth-child CSS3 不同

CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

CSS中:nth-child的用法

CSS3 Nth-child设置动态左侧位置[重复]

css pseudoclasse:nth-​​child(n).css

css pseudoclasse:nth-​​child(n).css