文章目录

一、伪类选择器是什么？

二、第一种伪类

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>

运行结果如下：

[CSS]伪类选择器 

 代码如下：

<!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>

运行结果如下：

 [CSS]伪类选择器

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>

运行结果如下：

 [CSS]伪类选择器

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>

运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

运行结果如下：

[CSS]伪类选择器 

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>

运行结果如下：

[CSS]伪类选择器 

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>

 运行结果如下：

[CSS]伪类选择器

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>

运行结果如下:

 [CSS]伪类选择器

三、第二种伪类

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>

 运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

 运行结果如下：

[CSS]伪类选择器

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>

运行结果如下：

[CSS]伪类选择器 

 四、第三种伪类

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>

 运行结果如下：

[CSS]伪类选择器

总结

以上就是今天要讲的内容，本文仅仅简单介绍了伪类选择器的使用，原对您有所帮助，接下来将继续介绍其它选择器

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。