发布时间：2023-05-23 文章分类：WEB开发, 电脑百科投稿人：赵颖字号：默认 | 大 | 超大打印

文章目录

一、伪类选择器是什么？

二、第一种伪类

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>

运行结果如下：

总结

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

标签 css, 选择, 选择器