Structural pseudo-class selector
/*ul 的 第一个元素*/
ul li :first-child{
background: black;
}
/*ul的最后一个元素*/
ul li:last-child{
background: red;
}
/* 选中 p1 :定位到父级元素 选择当前的第一个元素
选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效 顺序
*/
p:nth-child(1){
background: aqua;
}
/* 选中父元素,下的p元素的第二个,类型*/
p:nth-of-type(2){
background: yellow;
}
-
Complete case
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> </head> <style> /*ul 的 第一个元素*/ ul li :first-child{ background: black; } /*ul的最后一个元素*/ ul li:last-child{ background: red; } /* 选中 p1 :定位到父级元素 选择当前的第一个元素 选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效 */ p:nth-child(1){ background: aqua; } /* 选中父元素,下的p元素的第二个,类型*/ p:nth-of-type(2){ background: yellow; } </style> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>p4</li> <li>p5</li> <li>p6</li> </ul> </body> </html>