【CSS】CSS样式中的所有类型的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <!-- 内部样式 -->
    <style>
        /* 使用通用选择器，将选择 body 标签中的所有内容*/
        *{
            /* 设置字体颜色为棕色 */
            color: brown;
            /* 设置字体加粗 */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h3>h3通用选择器</h3>
    <p>p子保名不三别化不奔人上九后极使，不说所。</p>
    <span>span仇读有的，感么叹秦。</span>
</body>
</html>

运行结果如下：

2.元素选择器

作用：选择对应标签/元素里的内容
语法：标签名{}
例如：h1{}、p{}

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!-- 内部样式 -->
    <style>
        /* 使用元素选择器，将选中元素里的内容*/
        /* 选中h3标签，设置背景颜色，字体颜色 */
        h3{
            background-color: yellow;
            color: red;
        }
        /* 选中p标签，设置字体绿色 */
        p{
            color: green;
        }
    </style>
</head>
<body>
    <h3>h3标签，通用选择器</h3>
    <p>p标签，子保名不三别化不奔人上九后极使，不说所。</p>
    <span>span标签，仇读有的，感么叹秦。</span>
</body>
</html>

运行结果如下：

3.id选择器

作用：选择对应di属性值中的内容
语法：#id属性值{}
例如：#p1{}、#dd{}
注意：id属性值独一无二，只可以使用一次，不可重复使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <!-- 内部样式 -->
    <style>
        /* 使用id选择器，将选中id属性值中元素的内容*/
        /* 选中id属性值为#dd中的内容，设置字体颜色红色 */
        #dd{
            color: red;
        }
        /* 选中id属性值为p1中的内容，设置字体绿色 */
        #p1{
            color: green;
        }
        /* 选中id属性值为s1中的内容，设置字体蓝色 */
        #s1{
            color:blue
        }
    </style>
</head>
<body>
    <h3 id="dd">h3标签，通用选择器</h3>
    <p id="p1">p标签，子保名不三别化不奔人上九后极使，不说所。</p>
    <span id="s1">span标签，仇读有的，感么叹秦。</span>
</body>
</html>

运行结果如下：

4.class元素选择器

作用：选择对应class属性值元素中的内容。
语法：.class属性值{}
例如：.p1{}、.hh{}、.s{}
注意：class选择器和id选择器很像，但class选择器可以多次重复使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <!-- 内部样式 -->
    <style>
        /* 使用class选择器，将选中class属性值中元素的内容*/
        /* 选中class属性值为.dd中的内容，设置背景色灰色 */
        /* 注意：h3标签和span标签的class属性值相同，可以重复使用，id选择器不可以重复使用 */
        .dd{
            background-color: #999;
        }
        /* 选中class属性值为.p1中的内容，设置背景色橙色 */
        .p1{
            background-color: orange;
        }
    </style>
</head>
<body>
    <h3 class="dd">h3标签，通用选择器</h3>
    <p class="p1">p标签，子保名不三别化不奔人上九后极使，不说所。</p>
    <span class="dd">span标签，仇读有的，感么叹秦。</span>
</body>
</html>

运行结果如下：

三、复合选择器是什么？

复合选择器是建立在基础选择器之上的，由两个或者多个基础选择器，通过不同的方式组合而成。

四、复合选择器

复合选择器分为：交集选择器和并集选择器。

1.交集选择器

交集选择器：

作用：选中同时符合多个选择器条件的元素
语法：选择器1选择器2......{
例如：div.red{}、.red1#red2{}
注意：如果选择器中有元素选择器，元素选择器放在第一位

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        /* 使用交集选择器，将class为red的诗句变为红色，同时将class为red的h2字体变为24px */
        .red{
            color: red;
        }
        h2.red{
            color: red;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <center>
        <h1 class="red">咏柳</h1>
        <h2 class="red">贺知章·唐</h2>
        <p>碧玉妆成一树高，</p>
        <p>万条垂下绿丝绦。</p>
        <p>不知细叶谁裁出。</p>
        <p>二月春风似剪刀。</p>
    </center>
</body>
</html>

运行结果如下：

2.并集选择器

并集选择器：

作用：同时选中对应选择器的元素
语法：选择器1,选择器2,.....{}

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        /* 将class为red的诗句变为红色，同时将class为red的h2字体变为24px */
        .red{
            color: red;
        }
        h2.red{
            color: red;
            font-size: 24px;
        }
        /* 使用并集选择器，为 p 标签和 h2 标签添加背景色橙色  */
        h2,p{
            background-color: orange;
        }
    </style>
</head>
<body>
    <center>
        <h1 class="red">咏柳</h1>
        <h2 class="red">贺知章·唐</h2>
        <p>碧玉妆成一树高，</p>
        <p>万条垂下绿丝绦。</p>
        <p>不知细叶谁裁出。</p>
        <p>二月春风似剪刀。</p>
    </center>
</body>
</html>

运行结果如下：

五、关系选择器是什么？

关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、下一个兄弟选择器、下面所有兄弟选择器。

六、关系选择器

1.子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <span>花落知多少。</span>
        </h4>
    </center>
</body>
</html>

运行结果如下：

2.后代选择器

作用：通过指定的祖先元素找到指定的子元素

语法：父元素子元素{}（父元素和子元素中间空格）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
       /* 后代选择器 */
       /* 选择父元素 h4 标签下的子元素 span 标签 设置背景色蓝色 */
       h4 span{
           background-color: blue;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <span>花落知多少。</span>
        </h4>
        
        
    </center>
</body>
</html>

运行结果如下：

3.下一个兄弟选择器

作用：选择与当前元素紧挨着的下一个同级元素

语法：兄+第{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
       /* 后代选择器 */
       /* 选择父元素 h4 标签下的子元素 span 标签 设置背景色蓝色 */
       h4 span{
           background-color: blue;
       }
       /*下一个兄弟选择器 */
       /* 选择 h1 标签下 紧挨着的  p 标签， 设背景色绿色，字体颜色白色 */
       h1+p{
           background-color: green;
           color: white;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <span>花落知多少。</span>
        </h4>
        
        
    </center>
</body>
</html>

运行结果如下：

4.下面所有兄弟选择器

作用：选择当前元素下的所有同级元素

语法：兄~弟{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
       /* 后代选择器 */
       /* 选择父元素 h4 标签下的子元素 span 标签 设置背景色蓝色 */
       h4 span{
           background-color: blue;
       }
       /*下一个兄弟选择器 */
       /* 选择 h1 标签下 紧挨着的  p 标签， 设背景色绿色，字体颜色白色 */
       h1+p{
           background-color: green;
           color: white;
       }
       /* 下面所有兄弟选择器 */
       /* 选中h4标签下面的所有标签 ,设置背景颜色黑色，字体颜色白色*/
       h4~span{
           background-color: black;
           color: white;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，</h4>
        <span>处处闻啼鸟。</span>
        <span>夜来风雨声，</span>
        <span>花落知多少。</span>
        
    </center>
</body>
</html>

运行结果如下：

七、属性选择器是什么？

属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的五种用法。

八、属性选择器

1.第一种用法

作用：选择含有指定属性的元素。

语法：[属性名]{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种用法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名title,设置字体颜色红色  */
        [title]{
            color:red;
        }
    </style>
</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

运行结果如下：

2.第二种用法

作用：选择含有指定属性及指定属性值的元素。

语法：[属性名=属性值]{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title]{
            color:red;
        }
        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab]{
            color: green;
        }
    </style>
</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

运行结果如下：

3.第三种用法

作用：选择含有指定属性及指定属性之开头的元素。

语法：[属性名^=属性值]{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title]{
            color:red;
        }
        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab]{
            color: green;
        }
        /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
        /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
        [title^=ab]{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

运行结果如下：

4.第四种用法

作用：选择含有指定属性及指定属性值结尾的元素。

语法：[属性名$=属性值]

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title]{
            color:red;
        }
        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab]{
            color: green;
        }
        /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
        /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
        [title^=ab]{
            background-color: yellow;
        }
        /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
                语法：[属性名$=属性值] */
        /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
        [title$=ab]{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

运行结果如下：

5.第五种用法

作用：选择含有指定属性，只要含有某个属性值的元素。

语法：[属性值*=属性名]{}

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title]{
            color:red;
        }
        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab]{
            color: green;
        }
        /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
        /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
        [title^=ab]{
            background-color: yellow;
        }
        /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
                语法：[属性名$=属性值] */
        /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
        [title$=ab]{
            font-size: 30px;
        }
        /* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
                语法：[属性值*=属性名]{} */
        /* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
        [title*=c]{
            background-color: green;
        }
    </style>
</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

运行结果如下：

九、伪类选择器是什么？

伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。

十、第一种伪类

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>

运行结果如下：

十一、元素的伪类？

本文将介绍元素的伪类使用方法，其中:link、:visited只适用于超链接a标签。:hover和:active适用于所有元素，可以设置任何样式。

十二、使用方法

默认代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的伪类</title>
</head>
<body>
    <a href=""https://www.jd.com/">京东</a>
    <h1>《登高》</h1>
    <h2>杜甫·唐</h2>
    <div>
        <p>风急天高猿啸哀，渚清沙白鸟飞会。</p>
        <p>无边落木萧萧下，不尽长江滚滚来。</p>
        <p>万里悲秋常作客，白鸟多病独登台。</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
</body>
</html>

默认运行结果如下：

1. :visited

:link 表示超链接a标签未被访问前的状态。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的伪类</title>
    <style>
        /* 设置div样式 */
        div{
            width: 300px;
            height: 150px;
            border: 2px solid aqua;
        }
        /* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色 */
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com/">京东</a>
    <h1>《登高》</h1>
    <h2>杜甫·唐</h2>
    <div>
        <p>风急天高猿啸哀，渚清沙白鸟飞会。</p>
        <p>无边落木萧萧下，不尽长江滚滚来。</p>
        <p>万里悲秋常作客，白鸟多病独登台。</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
</body>
</html>

运行结果如下：

2. :link

:link 表示超链接a标签被访问后的状态。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的伪类</title>
    <style>
        /* 设置div样式 */
        div{
            width: 300px;
            height: 150px;
            border: 2px solid aqua;
        }
        /* 设置超链接未被访问的状态，设置超链接a标签颜色为绿色 */
        a:link{
            color: green;
        }
        /* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色*/
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com/">京东</a>
    <h1>《登高》</h1>
    <h2>杜甫·唐</h2>
    <div>
        <p>风急天高猿啸哀，渚清沙白鸟飞会。</p>
        <p>无边落木萧萧下，不尽长江滚滚来。</p>
        <p>万里悲秋常作客，白鸟多病独登台。</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
</body>
</html>

运行结果如下：

3. :hover

:hover 表示鼠标移入后的状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的伪类</title>
    <style>
        /* 设置div样式 */
        div{
            width: 300px;
            height: 150px;
            border: 2px solid aqua;
        }
        /* 设置超链接未被访问的状态，设置超链接a标签颜色为绿色 */
        a:link{
            color: green;
        }
        /* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色*/
        a:visited{
            color: red;
        }
        /* 设置鼠标移入div标签后背景色橙色 */
        div:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com/">京东</a>
    <h1>《登高》</h1>
    <h2>杜甫·唐</h2>
    <div>
        <p>风急天高猿啸哀，渚清沙白鸟飞会。</p>
        <p>无边落木萧萧下，不尽长江滚滚来。</p>
        <p>万里悲秋常作客，白鸟多病独登台。</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
</body>
</html>

运行结果如下：

4. :active

:hover 表示鼠标移点击后的状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的伪类</title>
    <style>
        /* 设置div样式 */
        div{
            width: 300px;
            height: 150px;
            border: 2px solid aqua;
        }
        /* 设置超链接未被访问的状态，设置超链接a标签颜色为绿色 */
        a:link{
            color: green;
        }
        /* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色*/
        a:visited{
            color: red;
        }
        /* 设置鼠标移入div标签后背景色橙色 */
        div:hover{
            background-color: orange;
        }
        /* 设置鼠标点击div标签后，div标签里的p标签背景色为粉色 */
        div:active>p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com/">京东</a>
    <h1>《登高》</h1>
    <h2>杜甫·唐</h2>
    <div>
        <p>风急天高猿啸哀，渚清沙白鸟飞会。</p>
        <p>无边落木萧萧下，不尽长江滚滚来。</p>
        <p>万里悲秋常作客，白鸟多病独登台。</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
</body>
</html>

运行结果如下：

十三、伪元素选择器

1. ::first-lettsr 选中内容中的第一个字母

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* 设置内容首字母50px */
        div::first-letter{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>
        快因杨爻答光老作未，小沫未无第主娇这，曾绪台在专杨者终未三和着定皇，王宋此时国生派逃娟学便，我大轻。
        卡揽自，明娘揽公得，斯而了尝一牛统是人是特为应我怎意己釜，太苟五对够友够对他他孔四韩惊作别，得尽胸。
    </div>
</body>
</html>

运行结果如下：

2. ::first-line 选中内容中的第一行

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* 设置内容首字母50px */
        div::first-letter{
            font-size: 50px;
        }
        /* 设置第一行内容背景色黄色 */
        div::first-line{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        快因杨爻答光老作未，小沫未无第主娇这，曾绪台在专杨者终未三和着定皇，王宋此时国生派逃娟学便，我大轻。
        卡揽自，明娘揽公得，斯而了尝一牛统是人是特为应我怎意己釜，太苟五对够友够对他他孔四韩惊作别，得尽胸。
    </div>
</body>
</html>

运行结果如下：

3. ::before 在元素开始位置前插入内容

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* 设置内容首字母50px */
        div::first-letter{
            font-size: 50px;
        }
        /* 设置第一行内容背景色黄色 */
        div::first-line{
            background-color: yellow;
        }
        /* 在内容开始前添加内容，，字体颜色为蓝色， */
        div::before{
            content: '早上好';
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        快因杨爻答光老作未，小沫未无第主娇这，曾绪台在专杨者终未三和着定皇，王宋此时国生派逃娟学便，我大轻。
        卡揽自，明娘揽公得，斯而了尝一牛统是人是特为应我怎意己釜，太苟五对够友够对他他孔四韩惊作别，得尽胸。
    </div>
</body>
</html>

运行结果如下：

4. ::after 在元素结束位置后插入内容

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* 设置内容首字母50px */
        div::first-letter{
            font-size: 50px;
        }
        /* 设置第一行内容背景色黄色 */
        div::first-line{
            background-color: yellow;
        }
        /* 在内容开始前添加内容，，字体颜色为蓝色， */
        div::before{
            content: '早上好';
            color: blue;
        }
         /* 在内容结束后添加内容，，字体颜色为红色，字体大小30px */
         div::after{
             content: '晚上好';
             color: red;
             font-size: 30px;
         }
    </style>
</head>
<body>
    <div>
        快因杨爻答光老作未，小沫未无第主娇这，曾绪台在专杨者终未三和着定皇，王宋此时国生派逃娟学便，我大轻。
        卡揽自，明娘揽公得，斯而了尝一牛统是人是特为应我怎意己釜，太苟五对够友够对他他孔四韩惊作别，得尽胸。
    </div>
</body>
</html>

运行结果如下：