11、伪类选择器 - HTML5&CSS3.0基础部分-xyphf-CSDN博客1.2.3.4.

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>