文章目录
一、CSS是什么？
HTML页面中的元素是通过CSS选择器进行控制的，如果要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要使用到CSS选择器。
二、常用选择器
1.通用选择器
- 作用：选择当前页面中的所有元素
- 语法：*{}
代码如下（示例）：
<!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>运行结果如下：
总结
以上就是今天要讲的全部内容，本文介绍了CSS样式选择器的所有用法，选择器有常用的选择器，有复合选择器，关系选择器，属性选择器，伪元素选择器，伪类选择器，元素的伪类。