ul,li {
display: block;
margin:0;
padding:0;
list-style:none;
}
li {
background: black;
color: white;
padding: 10px;
}
li:nth-child(2n+2) {
background: red;
}
li:nth-child(3n+3) {
background: green;
}
li:nth-child(4n+4) {
background: blue;
}
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
- eleven
- twelve
我需要什么:
黑色
红色
绿色
蓝色
黑色
红色
绿色
蓝色
...
......我怎么做到这一点:nth-child？
给出nth-child语法
:nth-child( )
你需要迭代使用 4n+b
所以,
背景red它将是4n+2如此,4x0+2,4x1+2,4x2+2等,它给你元件2,6,10
背景 green它将是4n+3如此,4x0+3,4x1+3,4x2+3等,它给你元件3,7,11
和背景'blue,这将是4n+4如此,4x0+4,4x1+4,4x2+4等,它给你元件4,8,12
black鉴于您的财产,其余的元素1,5,9将默认着色li
ul,li {
display: block;
margin:0;
padding:0;
list-style:none;
}
li {
background: black;
color: white;
padding: 10px;
}
li:nth-child(4n+2) {
background: red;
}
li:nth-child(4n+3) {
background: green;
}
li:nth-child(4n+4) {
background: blue;
}
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
- eleven
- twelve
京公网安备 11010802040832号 | 京ICP备19059560号-6 