作者:哗锅_348 | 来源:互联网 | 2022-12-10 12:55
我有ul列表项目,我希望它们的样式如下图.有没有办法通过使用css nth-child选择器或通过仅使用css的任何其他方式来设置它.
ul, ol {
list-style: none;
padding: 0;
}
li {
text-align: center;
line-height: 2;
background: slategrey;
border:1px solid white;
}
li:nth-child(1) {
background: lightsteelblue;
}
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve
1> CertainPerfo..:
用途li:nth-child(4n + 1), li:nth-child(4n + 4)
:
ul, ol {
list-style: none;
padding: 0;
}
li {
text-align: center;
line-height: 2;
background: slategrey;
border:1px solid white;
}
li:nth-child(4n + 1), li:nth-child(4n + 4) {
background: lightsteelblue;
}
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Ten
- Eleven
- Twelve