css伪类选择器主要包括哪四种（[CSS]伪类选择器）
文章目录
一 、伪类选择器是什么？
二 、第一种伪类
1. :first-child{}
2. :last-child{}
3. :nth-child(n){},(n为具体数字)
1. :nth-child(n){}
2. :nth-child(n){} 。
3. :nth-child(2n){}
4. :nth-child(even){}
5. :nth-child(2n+1){}
6. :nth-child(odd){}
三 、第二种伪类
1. first-of-type
2. last-of-type{}
3. nth-of-type(n){},(n为具体数字)
1. :nth-of-type(n){}
2. :nth-of-type(n){} 。
3. :nth-of-ype(2n){}
4. :nth-of-type(even){}
5. :nth-of-type(2n+1){}
6. :nth-od-type(odd){}
四 、第三种伪类
1. :not(){}
总结
一 、伪类选择器是什么？
伪类选择器简称“伪类 ” ，伪类是一种不存在的类 ，伪类用来表示元素的一种状态 。
二 、第一种伪类
1. :first-child{}
:first-child{},用来选择父元素下的第一个子元素 。
注意：:first-child{}是根据父元素下所有子元素进行排序 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* :first-child{}是根据父元素下所有子元素进行排序 ，元素ul下的第一个子元素是h1标签 ，设置没有效果 */ /* 选择父元素ul下的第一个子元素 ，设置字体颜色为红色 */ li:first-child{ color: red; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* :first-child{}是根据父元素下所有子元素进行排序 ，*/ /* 元素ul下的h1 、h2标签注释掉后 ，设置有效果 */ /* 选择父元素ul下的第一个子元素 ，设置字体颜色为红色 */ li:first-child{ color: red; } </style> </head> <body> <ul> <!-- <h1>《早发白帝城》</h1> <h2>唐·李白</h2> --> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
2. :last-child{}
:last-child{},用来选择父元素下的最后一个子元素 。
注意：:last-child{}是根据父元素下所有子元素进行排序
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* :first-child{}是根据父元素下所有子元素进行排序 ，*/ /* 元素ul下的h1 、h2标签注释掉后 ，设置有效果 */ /* 选择父元素ul下的第一个子元素 ，设置字体颜色为红色 */ li:first-child{ color: red; } /* 选择父元素ul下的最后一个子元素 ，设置背景色为黄色 */ li:last-child{ background-color: yellow; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
3. :nth-child(n){},(n为具体数字)
:nth-child(){},用来选择父元素下的第n个子元素 。
注意：:nth-child(){}是根据父元素下所有子元素进行排序
1. :nth-child(n){}
:nth-child(n){} ，选中父元素第n个子元素 ，n为一个具体数字 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选中父元素ul下第三行的子元素 ，设置背景色为黑色 ，字体颜色为白色 */ li:nth-child(3){ background-color: black; color: white; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
2. :nth-child(n){} 。
:nth-child(n){} ，选中父元素下所有子元素 ，n为字母 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选中父元素ul下的所有子元素 ，设置背景色为黑色 ，字体颜色为白色 */ li:nth-child(n){ background-color: black; color: white; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
3. :nth-child(2n){}
:nth-child(2n){} ，选中父元素下偶数行的子元素 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选中父元素ul下偶行的子元素 ，设置字体颜色为红色 */ li:nth-child(2n){ color: red; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
4. :nth-child(even){}
:nth-child(even){} ，选中父元素下偶数行的子元素
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选中父元素ul下偶行的子元素 ，设置背景色为黄色 */ li:nth-child(even){ background-color: yellow; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
5. :nth-child(2n+1){}
:nth-child(2n+1){} ，选中父元素下奇数行的子元素 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选中父元素ul下奇数行的子元素 ，设置背景色为绿色 ,字体颜色白色*/ li:nth-child(2n+1){ background-color: green; color: white; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
6. :nth-child(odd){}
:nth-child(odd){} ，选中父元素下奇数行的子元素 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选中父元素ul下奇数行的子元素 ，设置背景色为黄色 ,字体颜色红色*/ li:nth-child(odd){ background-color: yellow; color: red; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下:
三 、第二种伪类
1. first-of-type
:first-of-type{},用来选择父元素下的第一个子元素 。
注意：:first-of-type{}是根据父元素下所有同类型的子元素进行排序 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的第一个子元素 ，设置字体为红色 */ li:first-of-type{ color: red; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
2. last-of-type{}
:last-of-type{},用来选择父元素下的最后一个子元素 。
注意：:last-of-type{}是根据父元素下所有同类型的子元素进行排序 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的最后一个子元素 ，设置背景色为橙色,字体颜色红色 */ li:last-of-type{ background-color: orange; color: red; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
3. nth-of-type(n){},(n为具体数字)
:nth-of-type(n){},用来选择父元素下的第n个子元素 。
注意：:nth-of-stype(n){}是根据父元素下同类型的子元素进行排序
1. :nth-of-type(n){}
:nth-of-type(n){} ，选中父元素第n个子元素 ，n为一个具体数字 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的第二个子元素 ，设置背景色为蓝色,字体颜色白色*/ li:nth-of-type(2){ background-color: blue; color:white; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
2. :nth-of-type(n){} 。
:nth-of-type(n){} ，选中父元素下所有子元素 ，n为字母 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的所有子元素 ，设置字体颜色绿色*/ li:nth-of-type(n){ color:green; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
3. :nth-of-ype(2n){}
:nth-of-type(2n){} ，选中父元素下偶数行的子元素 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的所有偶数行子元素 ，设置字体大小28px,字体加粗*/ li:nth-of-type(2n){ font-size: 28px; font-weight: bold; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
4. :nth-of-type(even){}
:nth-of-type(even){} ，选中父元素下偶数行的子元素
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的所有偶数行子元素 ，设置字体大小28px,字体加粗 ，字体颜色绿色*/ li:nth-of-type(even){ font-size: 28px; font-weight: bold; color: green; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
5. :nth-of-type(2n+1){}
:nth-of-type(2n+1){} ，选中父元素下奇数行的子元素 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的所有奇数行子元素 ，设置字体大小28px,字体加粗 ，*/ li:nth-of-type(2n+1){ font-size: 28px; font-weight: bold; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
6. :nth-od-type(odd){}
:nth-of-type(odd){} ，选中父元素下奇数行的子元素 。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的所有奇数行子元素 ，设置字体大小28px,字体加粗 ，字体颜色为红色*/ li:nth-of-type(2n+1){ font-size: 28px; font-weight: bold; color: red; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li>千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
四 、第三种伪类
1. :not(){}
:not(n){}否定类 ，将复合的元素去除 ，n为指定数值 。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 去除ul无序列表默认项目符号 */ ul,li{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } /* 选择父元素ul下的l1子元素 ，去除背景色*/ li:not(.l1){ background-color: aqua; } </style> </head> <body> <ul> <h1>《早发白帝城》</h1> <h2>唐·李白</h2> <li>朝辞白帝彩云间 ，</li> <li class="l1">千里江陵一日还 。</li> <li>两岸猿声啼不住 ，</li> <li>轻舟已过万重山 。</li> </ul> </body> </html>运行结果如下：
总结
以上就是今天要讲的内容 ，本文仅仅简单介绍了伪类选择器的使用 ，原对您有所帮助 ，接下来将继续介绍其它选择器
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！