first-child代码举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child</title> <style> li:first-child { color: red; } </style> </head> <body> <ul> <li>列表一 <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </li> <li>列表二 <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </li> </ul> </body> </html>
first-child代码说明
举例的代码是li:first-child {}
获取第一个li 代码中可见,列表一基于ul是第一个li所以会变色,列表二是第二个li所以不会变色,列表二中的1会变色,因为1基于ol是第一个li
last-child代码举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>last-child</title> <style> li:last-child { color: red; } </style> </head> <body> <ul> <li>列表一 <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </li> <li>列表二 <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </li> </ul> </body> </html>
last-child代码说明
举例的代码是li:last-child {}
获取倒数第一个li 代码中可见,列表二基于ul是倒数第一个li所以会变色,列表一是倒数第二个li所以不会变色,列表二中的3会变色,因为3基于ol是倒数第一个li
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论
