新的 css 子选择器
阅读原文时间:2023年07月08日阅读:2



nth Child

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20



li {
padding: 0.25rem;
margin: 0.25rem;
list-style: none;
}
/* 选择父元素的第一个子元素 */
li:first-child {
background-color: red;
}
/* 选择父元素的最后一个子元素 */
li:last-child {
background-color: red;
}
/* 选择第三个 */
li:nth-child(3) {
background-color: blueviolet !important;
}
/* 选择3的倍数 */
li:nth-child(3n) {
background-color: olive;
}
/* 从7开始,按3的倍数进行选择 */
li:nth-child(3n+7) {
background-color: aqua;
}
li:nth-child(odd) {
background-color: violet;
}
li:nth-child(even) {
background-color: black;
}

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章