1.伪类选择器——nth-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>li:nth-child(1){background:red;}
/*li:first-child {background:red;}*/</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2.伪类选择器——奇数偶数选择器【应用隔行换色】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>li:nth-child(2n){background:red;}/*偶数*/
/*li:nth-child(2n+1){background:green;} 奇数+1*/
li:nth-child(2n-1){background:green;}
/*
li:nth-child(even){background:red;} //偶数
li:nth-child(odd){background:green;}//奇数
*/</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
3.伪类选择器——选取最后一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*li:nth-last-child(1){background:red;}*/
li:last-child{background:green;}</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
4.伪类选择器——获取顺数和倒数第一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>li:nth-of-type(1){background:red;}
li:nth-last-of-type(1){background:red;}</style>
</head>
<body>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>