二、CSS
一、CSS基础
1、css简介
CSS全称为：层叠样式表（Cascading Style Sheets）。
CSS 也是一种标记语言，用于给HTML结构设计样式，例如：文字大小、颜色、元素宽高等等。
简单理解：css可以美化HTML，让HTML更漂亮
核心思想：HTML搭建结构，CSS添加样式，实现了，结构与样式的分离。
2、css编写位置
2.1 行内样式
写在标签的 style 属性中，（又称：内联样式）。
语法：
<h1 style="color: greenyellow;font-size: 80px;">欢迎光临！</h1>
注意点：
1）style属性的值不能随便写，写要符合CSS语法规范，是 名:值; 的形式。
2）行内样式表，只能控制当前标签的样式，对其他标签无效。
存在的问题：
书写繁琐、样式不能复用、并且没有体现：出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。
2.2 内容样式
写在html页面内部，将所有的CSS代码提取出来，单独放在 <style> 标签中。
语法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式</title>
<style>
h1{
color: aqua;
font-size: 80px;
}
h2{
color: green;
font-size: 60px;
}
p{
color: blue;
font-size: 40px;
}
img{
width: 200px;
}
</style>
</head>
<body>
<h1>欢迎光临！</h1>
<h2>欢迎光临！</h2>
<p>欢迎光临！</p>
<img src="./imag/img8.jpg" alt="一个图片">
</body>
</html>注意点：
1、<style> 标签理论上可以放在HTML文档的任何地方，但一般都放在<head>标签中。
2、此种写法：样式可以复用、代码结构清晰。
存在的问题：
1、并没有直接实现：结构与样式完全分离。
2、多个HTML页面无法复用样式。
2.3 外部样式
写在单独的 .css 文件中，随后在HTML文件中引入使用。
语法：
1）新建一个扩展名为 .css 的样式文件，把所有css代码都放入此文件中。
h1{
color: aqua;
font-size: 80px;
}
h2{
color: green;
font-size: 60px;
}
p{
color: blue;
font-size: 40px;
}
img{
width: 200px;
}2）在HTML文件中引入 .css 文件。
<link rel="stylesheet" href="./a.css">
注意点：
1、<link> 标签要写在 <head> 标签中
2、<link> 标签属性说明：
href ：引入的文档来自于哪里。
rel：说明引入的文档与当前文档之间的关系。
3、外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
4、实际开发中，几乎都使用外部样式，这是最推荐的使用方式！
3、样式表的优先级
优先级规则：行内样式 > 内部样式 > 外部样式
1、内部样式、外部样式、，这二者的优先级相同，且：后面的会覆盖前面的（简记为 后来者居上）
2、同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的。
| 分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
| 行内样式 | 优先级最高 | 1、结构与样式未分离 2、代码结构混乱 3、样式不能复用 | 很低 | 当前标签 |
| 内部样式 | 1、样式可复用 2、代码结构清晰 | 1、结构与样式未彻底分离 2、样式不能多页面复用 | 一版 | 当前页面 |
| 外部样式 | 1、样式可多页面复用 2、代码结构清晰 3、可触发浏览器的缓存机制 4、结构与样式彻底分离 | 需要引入才能使用 | 最高 | 多个页面 |
4、CSS语法规范
CSS语法规范由两部分构成：
- 选择器：找到要添加样式的元素。
- 生命快：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值
备注1：最后一个声明后的分号理论上能省略，但最好还是写上。
备注2：选择器与生命快之间，属性名与属性值之间。均有一个空格，理论上能省略，但最好还是写上。
CSS中注释的写法：
h1 {
/* 颜色为红色，大小为80 */
color: brown;
font-size: 80;
}5、CSS代码风格
展开风格 ：开发时推荐，便于维护和调试。
h1 {
/* 颜色为红色，大小为80 */
color: brown;
font-size: 80;
}紧凑风格：项目上线时推荐，可减小文件体积。
h1{color: brown;font-size: 80;}备注：
项目上线时，我们会通过工具将 展开风格 的代码，变成 紧凑风格 ，这样可以减小文件体积，节约网络流量。同时也能让用户打开网页时速度更快。
二、CSS选择器
1、CSS基本选择器
- 通配选择器
- 元素选择器
- 类选择器
- id选择器
1.1 通配选择器
作用：可以选中所有的HTML元素。
语法：
* {
属性名:属性值
}
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通配选择器</title>
<style>
* {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者：优秀的网友们</h2>
<p>万水千山总是情，爱我多点行不行！</p>
<p>草莓、蓝莓、蔓越莓，今天你想我了没？</p>
<p>我心里给你留了一块地，我的死心塌地！</p>
</body>
</html> 
备注：目前来看通配选择器优点鸡肋，但后面清楚样式时，会对我们有很大的帮助，后面会详细讲。
1.2 元素选择器
作用：为页面中某种元素统一设置样式。
语法：
标签名 {
属性名:属性值；
}
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
h1 {
color: brown;
}
h2 {
color: chocolate;
}
h3 {
color: darkgoldenrod;
}
p {
color: darkorchid;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者：优秀的网友们</h2>
<p>万水千山总是情，爱我多点行不行！</p>
<p>草莓、蓝莓、蔓越莓，今天你想我了没？</p>
<p>我心里给你留了一块地，我的死心塌地！</p>
<br>
<h2>反土味情话</h2>
<h3>作者：更优秀的网友们</h3>
<p>一寸光阴一寸金，劝你死了这条心！</p>
<p>西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
<p>我心里只有一块地，我的玛莎拉蒂！</p>
</body>
</html>
元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。
1.3 类选择器
作用：根据元素的class值，来选中某些元素。
class翻译过来有：种类、类别的含义，所以class值，又称：类名
语法：
.类名 {
属性名:属性值
}举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.speak {
color: limegreen;
}
.answer {
color: slateblue;
}
.big {
font-size: 100px;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2>土味情话</h2>
<h3>作者：优秀的网友们</h2>
<p class="speak big">我对你说：万水千山总是情，爱我多点行不行！</p>
<p class="speak">我对你说：草莓、蓝莓、蔓越莓，今天你想我了没？</p>
<p class="speak">我对你说：我心里给你留了一块地，我的死心塌地！</p>
<br>
<h2>反土味情话</h2>
<h3>作者：更优秀的网友们</h3>
<p class="answer">你回答我：一寸光阴一寸金，劝你死了这条心！</p>
<p class="answer">你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
<p class="answer">你回答我：我心里只有一块地，我的玛莎拉蒂！</p>
</body>
</html>注意点：
1、元素的class属性值不带 . ，但CSS的类选择器腰带 .
2、class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如：left-menu ，且命名要有意义，做到“见名知意”。
3、一个元素不能写多个class 属性，下面是错误示例：
<h1 class="speak" class="big">你好啊</h1>
4、一个元素的class属性，能写多个值，要用空格隔开，例如:<h1 class="speak big">你好啊</h1>
1.4 id选择器
作用：根据元素的id属性值，来精准的选中某个元素。
语法：
#id值 {
属性名:属性值;
}举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#earthy {
color: brown;
}
#turn-earthy {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2 id="earthy">土味情话</h2>
<h3>作者：优秀的网友们</h2>
<p>我对你说：万水千山总是情，爱我多点行不行！</p>
<p>我对你说：草莓、蓝莓、蔓越莓，今天你想我了没？</p>
<p>我对你说：我心里给你留了一块地，我的死心塌地！</p>
<br>
<h2 id="turn-earthy">反土味情话</h2>
<h3>作者：更优秀的网友们</h3>
<p >你回答我：一寸光阴一寸金，劝你死了这条心！</p>
<p >你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
<p >你回答我：我心里只有一块地，我的玛莎拉蒂！</p>
</body>
</html>注意：
1、id属性值：尽量由字母、数字、下划线（_）、短杠（-）组成，最好以字母开头、不要包含空格、区分大小写。
2、一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
3、一个元素可以同时拥有 id 和 class属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#earthy {
color: brown;
}
#turn-earthy {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<h2 id="earthy">土味情话</h2>
<h3>作者：优秀的网友们</h2>
<p>我对你说：万水千山总是情，爱我多点行不行！</p>
<p>我对你说：草莓、蓝莓、蔓越莓，今天你想我了没？</p>
<p>我对你说：我心里给你留了一块地，我的死心塌地！</p>
<br>
<h2 id="turn-earthy">反土味情话</h2>
<h3>作者：更优秀的网友们</h3>
<p >你回答我：一寸光阴一寸金，劝你死了这条心！</p>
<p >你回答我：西瓜、南瓜、哈密瓜，把你打成大傻瓜！</p>
<p >你回答我：我心里只有一块地，我的玛莎拉蒂！</p>
</body>
</html>1.5 基本选择器总结
| 基本选择器 | 特点 | 用法 |
| 通配符选择器 | 选中所有标签，一般用于清除样式 | *{color:red} |
| 元素选择器 | 选中所有同种标签，但是不能差异化选择 | h1{color:red} |
| 类选择器 | 选中所有特定类名（class值）的元素 -- 使用频率很高。 | .say{color:red} |
| ID选择器 | 选中特定 id 值的那个元素（唯一的） | #earthy{color:red} |
2、CSS复合选择器
css选择器整体分类两大类：
一、基本选择器：
1）通配选择器
2）元素选择器
3）类选择器
4）ID 选择器
二、符合选择器：
1）交集选择器
2）并集选择器
3）后代选择器
4）子元素选择器
......
1、复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
2、复合选择器可以在复杂结构中，快速而准确的选中元素。
2.1 交集选择器
作用：选中同时符合多个条件的元素。
交集有并且的含义（通俗理解：即...又....的意思），例如：年轻且长得帅。
语法：选择器1选择器2选择器3...选择器n {}
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
/* 基本选择器有如下几种
1、* {} 选择所有
2、h1 {} 选择和h1标签相关的
3、.class {} 选择类名相等的
4、#id {} 选择id相等的
实际上复合选择器就是对上述基本选择器的再次组合*/
/* 第一种方式 标签 + 类名 */
p.zhangsan {
color: darkgreen;
}
p.lisi {
color: darkorange;
}
/* 第二种方式 类名 + 类名 */
.zhangsan.friend {
color: brown;
}
.lisi.friend {
color: blue;
}
</style>
</head>
<body>
<h1 class="zhangsan">我是张三！</h1>
<h2 class="lisi">我是李四！</h2>
<hr>
<p class="zhangsan friend">我是张三的朋友！</p>
<p class="lisi friend">我是李四的朋友！</p>
</body>
</html>注意：
1、有标签名，标签名必须写在前面
2、id 选择器、通配符选择器，理论上可以作为交集的条件，但实际应用中几乎不用 -- 因为没有意义。3、交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素。
4、用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty
5、上述两种方式，但是也分优先级，并不是谁写在后面就用谁，后面会单独说优先级的问题。
2.2 并集选择器
作用：选中多个选择器对应的元素，又称：分组选择器。
所谓并集就是或者的含义（通俗理解为要么...要么...的意思），例如，给我转10万块钱或者我报警。
语法：选择器1,选择器2,选择器3, ... 选择器n {}
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
/* 基本选择器有如下几种
1、* {} 选择所有
2、h1 {} 选择和h1标签相关的
3、.class {} 选择类名相等的
4、#id {} 选择id相等的
实际上复合选择器就是对上述基本选择器的再次组合 */
/* 第一种并集 .class 并集*/
.A,
.a {
color: blue;
}
.B,
.b {
color: brown;
}
/* 第二种并集，标签 与 .class 并集 */
h1,
.A {
color: darkviolet;
}
/* 第三种并集，标签与标签的并集 */
h1,
p {
color:cyan;
}
/* 第四种并集，标签与id的并集 */
h1,
#AA {
color: lawngreen;
}
</style>
</head>
<body>
<h1 class="A" id="AA">我是字母A！</h1>
<h1 class="B">我是字母B！</h1>
<hr>
<p class="a">我是字母A的小写a！</p>
<p class="b">我是字母B的小写b！</p>
</body>
</html>注意：
1、并集选择器，我们一版竖着写
2、任务形式的选择器，都可以作为并集选择器的一部分。
3、并集选择器，通常用于集体声明，可以缩小样式表体积。
2.3 HTML元素间的关系
分为：1、父元素 2、子元素 3、祖先元素 4、后代元素 5、兄弟元素
1、父元素：直接包裹某个元素的元素，就是该元素的父元素
2、子元素：被父元素直接包含的元素（简记：儿子元素）
3、祖先元素：父亲的父亲....,一直往外找，都是祖先。父元素也是祖先元素的一种。
4、后代元素：儿子的儿子...,一直往里找，都是后代。子元素也是后代元素的一种。
5、兄弟元素：具有相同父元素的元素，互为兄弟元素。
2.4 后代选择器
作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 .... 选择器n {} （先写祖先，再写后代）
选择器之间用空格隔开，空格可以理解为 xxx中的 其实就是后代的意思，选择器可以是我们之前学的任何一种选择器。
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
/* 第一种 选中ul中所有li标签，
不管是子代还是后代只要是 ul中被li标签包裹的都会被选中*/
ul li {
color: brown;
}
/* 选中ul中的li标签中的被a标签包裹的元素 */
ul li a {
color: blueviolet;
}
/* 第二种 选中 .subject类中被li标签包裹的元素 */
.subject li {
color: darkblue;
}
/* 第三种 包含id选择器,.subject类中id为web的元素 */
.subject #web {
color: aqua;
}
/* 第四种 嵌套并集选择器或者交集选择器 */
/* 选中subject类下 li标签中并且id为web的元素 */
.subject li#web {
color: black;
}
/* 选中subject类下 li标签或者id为web的元素 */
.subject li,#web {
color:darkolivegreen;
}
</style>
</head>
<body>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
<div>
<li>踢球</li>
</div>
<span>打篮球</span>
<li><a href="#">打羽毛球</a></li>
<li><span>打羽毛球</span></li>
</ul>
<hr>
<ul class="subject">
<li id="web">前端</li>
<li>Java</li>
<li>大数据</li>
<li>测试</li>
</ul>
</body>
</html>注意：
1、后代选择器，最红选择的都是后代，不选中祖先
2、儿子、孙子、重孙子、都算是后代
3、结构一定要符合之前讲的HTML嵌套要求，例如，不能p中写h1-h6标签4、后代选择器可以与 并集选择器、交集选择器进行嵌套
2.5 子代选择器
作用：选中指定元素中，符合要求的子元素（儿子元素）。先写父，再写子，又称为子元素选择器、子选择器。
语法：选择器1>选择器2>选择器3>.....选择器n {}
选择器之间，用 > 隔开，>可以理解为："xxx子代"，其实就是儿子的意思。
选择器 1234...n，可以是我们之前学的任何一种选择器。
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子类选择器</title>
<style>
/* 只选择div子代中的a标签 */
div > a {
color:brown;
}
/* div子代中p标签子代中的a标签 */
div > p > a {
color: blueviolet;
}
/* foot类中子代a表中的元素 */
.foot > a {
color: darkgreen;
}
</style>
</head>
<body>
<div>
<a href="#">张三</a>
<a href="#">李四</a>
<a href="#">王五</a>
<p>
<a href="#">赵六</a>
<div class="foot">
<a href="#">孙七</a>
</div>
</p>
</div>
</body>
</html>注意：
1、子代选择器，最终选择的时子代，不是父级。
2、子、孙子、重孙子、重重孙子.....统称后代！ 子就是指儿子。
2.6 兄弟选择器
相邻兄弟选择器：
作用：选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻就是紧挨着它的下一个，简记 睡在我下铺的兄弟。
语法：选择器1 + 选择器2 {}。
示例：
/* 选择向下紧挨着div的p标签
必须是紧紧相邻，隔着一个标签都不行*/
div+p{
color: blueviolet;
} 通用兄弟选择器：
作用：选中指定元素后，符合条件的所有兄弟元素。简记 睡在我下铺的所有兄弟。
语法：选择器1~选择器2 {}
示例：
/* 选中div后面所有的兄弟p元素， */
div~p{
color: brown;
}注意：两种兄弟选择器，选择的是下面的兄弟
2.7 属性选择器
作用：选中属性值符合一定要求的元素。
语法：
1、[属性名] 选中具有某个属性的元素
2、[属性名 = "值"] 选中包含某个属性，且属性值等于指定值的元素。
3、[属性名^="值'] 选中包含某个属性，且属性值以指定的值开头的元素。4、[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5、[属性名*="值"] 选中包含某个属性，属性值包含指定值的元素。
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选中具有title属性的元素 */
p[title] {
color: brown;
}
/* 选中title属性值为2hello2的元素 */
p[title="2hello2"] {
color:blue;
}
/* 选中title属性以3开头的元素 */
p[title^="3"] {
color:blueviolet;
}
/* 选中title属性值以4结尾的元素 */
p[title$="4"] {
color:coral;
}
/* 选中title属性值包含g的元素 */
p[title*="5"] {
color:chartreuse;
}
</style>
</head>
<body>
<p title="1hello1">1你好1</p>
<p title="2hello2">2你好2</p>
<p title="3hello3">3你好3</p>
<p title="4hello4">4你好4</p>
<p title="5hello5">5你好5</p>
</body>
</html>2.8 伪类选择器
作用：选中特殊状态的元素。伪类可以理解为，并不是一种具体的类，但不是类，是元素的一种特殊状态。
常用的伪类选择器：
一、动态伪类：
1、:link 超链接未被访问的状态
2、:visited 超链接访问过的状态。
3、:hover 鼠标悬停在元素上的状态
4、:active 元素激活的状态。激活就是按下鼠标不松开
注意点：遵循 LVHA 的顺序，即：link、visited、hover、active。
这四个状态不能乱写，要遵循这个顺序。顺序不对，效果会不奏效。因为当按下按钮时同时符合 link(未被访问)、hover(悬浮状态)、active(激活状态) 这三种状态，如果写的顺序不对，就会按照后来者居上的原则，展示最后的设置。所以顺序就是这样固定的，可以记为 LVHA (LV好！)
link、visited 是 a 标签所独有的两种状态，别的元素都不具备这两种状态。hover 和 active 是所有元素都能具备的状态。
5、:focus 获取焦点的元素。
表单元素才能使用:focus 伪类。
当用户：点击元素、触摸元素、或通过键盘的“tab” 键等方式，选择元素时，就是获得焦点。
就是说比如输入框中，点击输入框，然后输入元素的时候才会有作用。
举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态伪类</title>
<style>
/* link代表没有访问过的a标签 */
a:link {
color: brown;
}
/* visited代表访问过的a元素 */
a:visited {
color: blue;
}
/* hover代表鼠标悬浮状态的a元素 */
a:hover {
color: darkgreen;
}
/* 选中的是激活状态的a元素 */
a:active {
color: darkmagenta;
}
/* 选中的是悬浮在鼠标悬浮的span元素 */
span:hover {
color: darkorange;
}
/* 选中的是激活状态的span元素，就是被点击过的 */
span:active {
color: hotpink;
}
/* 选中的是获取焦点的input元素跟select元素，就是点击之后的表单元素 */
input:focus,select:focus {
color: cornflowerblue;
background-color: chartreuse;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<span>哪也不去</span>
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</body>
</html> 二、结构伪类：
常用的：
1、:first-child 所有兄弟元素中的第一个。注意强调的是第一个！
/* 选中div的第一个儿子p元素
注意 第一个，意思就是div下面的第一个儿子元素 且 必须是p元素才生效。一个条件不符合都不生效*/
div>p:first-child {
color: brown;
}
/* 选中div中的后代中的第一个p元素
注意 div后代 且 第一个p元素 ，意思就是说要满足时div的后代，且p标签必须是其父标签的第一个儿子，p标签的父级是谁无所谓。*/
div p:first-child {
color: brown;
}
/* 选中的是第一个p元素
注意 第一个p元素 ，意思就是说p标签必须是其父标签的第一个儿子，p标签的父级是谁无所谓。*/
p:first-child {
color: brown;
}2、:last-child 所有兄弟元素中的最后一个。
/* 选中div的最后一个儿子p元素
注意是儿子元素 且 最后一个p元素， 如果不是最后一个或者最后一个标签不是p元素都不生效 */
div>p:last-child {
color: brown;
}3、nth-child(n) 所有兄弟元素中的第n个。
/* 选中的是div中的前5个p元素
关于n的值：官方推荐的写法是 an + b 的格式，
就是说a和b是一个常数，可以是负数也可以是正数。
n的值从 1 开始 到正无穷，算出来的值中有包含在内的元素值，就会被选中
例如 -n + 5 代表着 （-1 * n + 5） n从1开始计算只有1、2、3、4、5 这5个元素在div标签包含的数量中，所以前五个会被选中*/
div>p:nth-child(-n+5){
color: blue;
}4、first-of-type 所有同类型兄弟元素中的第一个。
/* 选中的是div是儿子元素中 所有p元素中的第一个 */
div>p:first-of-type{
color: brown;
}5、last-of-type 所有同类型兄弟元素中的最后一个。
/* 选中的是div是儿子元素中 所有p元素中的第一个 */
div>p:last-of-type{
color: brown;
}6、:nth-of-type(n) 所有同类型兄弟元素中的第n个。n的用法与nth-child(n)一致
div>p:nth-of-type(n){
color: blueviolet;
}关于n的值：
1. 0 或 不写 ：什么都选不中 —— 几乎不用。2. n ：选中所有子元素 —— 几乎不用。3. 1~ 正无穷的整数 ：选中对应序号的子元素。4. 2n 或 even ：选中序号为偶数的子元素。5. 2n+1 或 odd ：选中序号为奇数的子元素。6. - n+3 ：选中的是前 3 个。
不常用的（了解即可）:
1、:nth-last-child(n) :所有兄弟元素中的倒数第n个。
/* 选中div中倒数第3个儿子p元素，与nth-child 相反 */
div>p:nth-last-child(3){
color: brown;
}2、:nth-last-of-type(n)：所有同类型兄弟元素中的倒数第n个。
/* 选中div中所有p元素中的倒数第3个，与nth-of-type 相反 */
div>p:nth-last-of-type(3){
color: brown;
}3、:only-child 选择没有兄弟的元素（独生子女）。
/* 选中没有兄弟的p元素 */
p:only-child {
color: blue;
}4、:only-of-type 选择没有同类型兄弟的元素。
/* 选中没有同类型p元素的p元素，就是这个p元素只能有一个，可以有别的其他元素 */
p:only-of-type{
color: brown;
}5、:root 根元素。
/* 选中的是根元素，效果会将整个网页背景变成黑色 */
:root {
background-color: black;
}6、:empty 内容为空的元素（空格也算内容）
/* 选中没有内容的div元素 */
div:empty{
background-color: black;
width: 200px;
height: 200px;
}
三、否定伪类
:not(选择器) 排除满足括号中条件的元素。
/* 选中div的儿子p元素，但是排除类名为fail的元素 */
div>p:not(.fail){
color: brown;
}
/* 选中div的儿子p元素，但是排除属性名title以你要加油开头的元素 */
div>p:not([title^="你要加油"]){
color: blue;
}
/* 选中的是div的儿子p元素，但排除第一个儿子p元素 */
div>p:not(:first-child){
color: blue;
}四、UI伪类：
原文地址：https://blog.csdn.net/kkkkatoq/article/details/143872590
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！