css之选择第一个或最后一个元素、第n个标签、选择偶数或奇数标签、选择最后n个标签、等差数列标签的选择、first、last、nth、child

MENU

  • first-child选择列表中的第一个标签
  • last-child选择列表中的最后一个标签
  • nth-child(n)选择列表中的第n个标签
  • nth-child(2n)选择列表中的偶数位标签
  • nth-child(2n-1)选择列表中的奇数位标签
  • nth-child(n+m)选择从第m个到最后一个标签
  • nth-child(-n+m)选择从第1个到第m个
  • nth-last-child(3)选择最后3个标签
  • nth-last-child(3n)选择3倍数位的标签
  • nth-last-child(3n-1)选择等差数列的标签


first-child选择列表中的第一个标签

li:first-child {
    color: red;
}

last-child选择列表中的最后一个标签

li:last-child {
    color: pink;
}

nth-child(n)选择列表中的第n个标签

li:nth-child(3) {
    color: pink;
}

nth-child(2n)选择列表中的偶数位标签

li:nth-child(2n) {
    color: pink;
}

nth-child(2n-1)选择列表中的奇数位标签

li:nth-child(2n-1) {
    color: pink;
}

nth-child(n+m)选择从第m个到最后一个标签

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

nth-child(-n+m)选择从第1个到第m个

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

nth-last-child(3)选择最后3个标签

li:nth-last-child(3) {
    color: pink;
}

nth-last-child(3n)选择3倍数位的标签

li:nth-last-child(3n) {
    color: pink;
}

nth-last-child(3n-1)选择等差数列的标签

li:nth-last-child(3n-1) {
    color: pink;
}

你可能感兴趣的:(web前端,CSS,前端,css,web)