【HTML】CSS子类选择器

mac2022-06-30 51

CSS的伪子类选择器

first-child:

定义：可以选中第一个子类元素（在所有的元素中，选中的元素必须是第一个子元素）语法：元素：first-child{}

last-child:

定义：可以选中最后一个子类元素（在所有的元素中，选中的元素必须是最后一个子元素）语法：元素：last-child{}

nth-child:

定义：可以选中任何一个子类元素（在所有的元素中，选中的元素符合所有元素排序的顺序）语法：元素：first-child（选中孩子的序号）{} 选中的序号：如果是even选中的是所以偶数的子元素 odd是选中奇数的子元素

first-of-type:

定义：可以选中第一个子类元素（当前的元素中的第一个子元素）语法：元素：first-of-type{}

last-of-type:

定义：可以选中最后个子类元素（当前的元素中的最后一个子元素）语法：元素：first-of-type{}

nth-of-type:

定义：可以选中任何一个子类元素（当前的元素中的任何一个子元素）语法：元素：first-of-type{}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type = "text/css"> /* p:first-child{*/ /* background-color: blue;*/ /*}*/ /*p:last-child{*/ /* background-color: purple;*/ /*}*/ /*p:nth-child(2){*/ /* color: blueviolet;*/ /*}*/ /*p:nth-of-type(2){*/ /* background-color: blue;*/ /*}*/ /*p:first-of-type{*/ /* background-color: blue;*/ /*}*/ p:last-of-type{ background-color: blue; } </style> </head> <body> <div> <span>hahaha</span> <p>我是一只猫</p> <p>我是一只猫</p> <p>我是一只猫</p> <div><p>我是一只猫</p></div> </div> </body> </html>

最新回复(0)