css 的复合选择器的伪类选择器的概念、动态伪类、结构伪类、否定伪类、UI伪类、目标伪类、语言伪类及伪元素选择器等：
- Ⅰ、伪类选择器的概念：
- Ⅱ、伪类选择器的动态伪类：a:link、:visited、:hover、:active
- Ⅲ、伪类选择器的结构伪类：
-
- [其一、结构伪类1：div>p:first-child、div p:first-child、p:first-child](#其一、结构伪类1：div>p:first-child、div p:first-child、p:first-child)
- 其二、结果为：
- 其三、结构伪类2：div>p:last-child、div>p:nth-child(2n)、div>p:first-of-type、div>p:last-of-type、div>p:nth-of-type(5)
- 其四、结果为：
- 其五、结构伪类3：div>p:nth-last-child(3)、div>p:nth-last-of-type(2)、span:only-child、span:only-of-type、:root、div:empty
- 其六、结果为：
- Ⅳ、伪类选择器的否定伪类：div>p:not(:first-child)
- Ⅴ、伪类选择器的UI伪类：input:checked、input:disabled、input:enabled
- Ⅵ、伪类选择器的目标伪类：div:target
- Ⅶ、伪类选择器的语言伪类：div:lang(en)
- Ⅷ、伪元素选择器：div::first-letter、div::first-line、div::selection、input::placeholder、p::before、p::after
- Ⅸ、小结：
Ⅰ、伪类选择器的概念：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07_伪类选择器_概念</title>
<style>
/* 什么是伪类？ ------ 很像类，但不是类（class），是元素特殊状态的一种描述 */
/* 选中的是没有访问过的a元素 */
a:link {
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited {
color: gray;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
// 访问过后的页面显示：
Ⅱ、伪类选择器的动态伪类：a:link、:visited、:hover、:active
其一、代码为：
其二、结果为：
// 一进入页面后的页面：
// 在去百度和去京东悬停后的页面：
// 在去百度和去京东鼠标点击未放松的页面(激活状态)：
// 在去百度和去京东访问后的页面：
// input 框及 select 框获取焦点后的页面：
Ⅲ、伪类选择器的结构伪类：
其一、结构伪类1：div>p:first-child、div p:first-child、p:first-child
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09_伪类选择器_结构伪类_1</title>
<style>
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） ------ 看结构1 */
/* div>p:first-child {
color: red;
} */
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） ------ 看结构2 */
/* div>p:first-child {
color: red;
} */
/* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） ------ 看结构3 */
/* div p:first-child {
color: red;
} */
/* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） ------ 看结构4 */
p:first-child {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>张三：98分</span>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构3 -->
<!-- <div>
<marquee>
<p>张三：98分</p>
</marquee>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构4 -->
<p>测试1</p>
<div>
<p>测试2</p>
<marquee>
<p>测试3</p>
<p>张三：98分</p>
</marquee>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div>
</body>
</html>其二、结果为：
// 一进入页面后结构1的页面(div>p:first-child)：
// 一进入页面后结构2的页面(div>p:first-child)：
// 一进入页面后结构3的页面(div p:first-child)：
// 一进入页面后结构4的页面(p:first-child)：
其三、结构伪类2：div>p:last-child、div>p:nth-child(2n)、div>p:first-of-type、div>p:last-of-type、div>p:nth-of-type(5)
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10_伪类选择器_结构伪类_2</title>
<style>
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）------ 结构1*/
/* div>p:first-child {
color: red;
} */
/* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）------ 结构1*/
/* div>p:last-child {
color: red;
} */
/* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）------ 结构1 */
/* div>p:nth-child(3) {
color: red;
} */
/* 选中的是div的偶数个儿子p元素（按照所有兄弟计算的）------ 结构2 */
/* 关于n的值 ------ 结构2：
1. 0或不写：什么都选不中 ------ 几乎不用。
2. n ：选中所有子元素 ------ 几乎不用。
3. 1 ~ 正无穷的整数，选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2n+1 或 odd ：选中序号为奇数的子元素。
6. -n+3 : 选中前三个。
*/
/* div>p:nth-child(2n) {
color: red;
} */
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）------ 结构3 */
/* div>p:first-of-type{
color: red;
} */
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）------ 结构3 */
/* div>p:last-of-type{
color: red;
} */
/* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）------ 结构3 */
div>p:nth-of-type(5) {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
<p>第5个</p>
<p>第6个</p>
<p>第7个</p>
<p>第8个</p>
<p>第9个</p>
<p>第10个</p>
</div> -->
<!-- 结构3 -->
<div>
<span>测试1</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<span>测试2</span>
<p>赵六：68分</p>
<span>测试3</span>
<p>孙七：58分</p>
<span>测试4</span>
<p>老八：48分</p>
<span>测试5</span>
</div>
</body>
</html>其四、结果为：
// 一进入页面后结构1的页面(div>p:nth-child(3))：
// 一进入页面后结构2的页面(div>p:nth-child(2n))：
// 一进入页面后结构3的页面(div>p:nth-of-type(5))：
其五、结构伪类3：div>p:nth-last-child(3)、div>p:nth-last-of-type(2)、span:only-child、span:only-of-type、:root、div:empty
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11_伪类选择器_结构伪类_3</title>
<style>
/* 选中div中倒数第n个的儿子p元素（按照所有兄弟）------ 看结构1 */
/* div>p:nth-last-child(3) {
color: red;
} */
/* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟）------ 看结构1 */
/* div>p:nth-last-of-type(2) {
color: red;
} */
/* 选中的是没有兄弟的span元素 ------ 看结构2 */
/* span:only-child {
color: red;
} */
/* 选中的是没有同类型兄弟的span元素 ------ 看结构2 */
/* span:only-of-type {
color: red;
} */
/* 选中的是根元素 */
/* :root {
background-color: gray;
} */
/* 选中的是没有内容的div元素 ------ 看结构3(注意：有空格的div也算是有内容的) */
div:empty {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<span>测试1</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
<span>测试2</span>
</div> -->
<!-- 结构2 -->
<div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
</div>
<!-- 结构3 -->
<div></div>
</body>
</html>其六、结果为：
// 一进入页面后结构1的页面(div>p:nth-last-child(3)或div>p:nth-last-of-type(2))：
// 一进入页面后结构2的页面(span:only-of-type)：
// 一进入页面后结构3的页面(div:empty)：
Ⅳ、伪类选择器的否定伪类：div>p:not(:first-child)
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12_伪类选择器_否定伪类</title>
<style>
/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
/* div>p:not(.fail) {
color: red;
} */
/* 选中的是div的儿子p元素，但是排除title属性值以"你要加油"开头的 */
/* div>p:not([title^="你要加油"]) {
color: red;
} */
/* 选中的是div的儿子p元素，但排除第一个儿子p元素 */
div>p:not(:first-child) {
color: red;
}
</style>
</head>
<body>
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p class="fail" title="你要加油啊！孙七">孙七：58分</p>
<p class="fail" title="你要加油啊！老八">老八：48分</p>
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅴ、伪类选择器的UI伪类：input:checked、input:disabled、input:enabled
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13_伪类选择器_UI伪类</title>
<style>
/* 选中的是勾选的复选框或单选按钮 */
input:checked {
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
background-color: gray;
}
/* 选中的是可用的input元素 */
input:enabled {
background-color: green;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
// 复选框及单选按钮选中后的页面：
Ⅵ、伪类选择器的目标伪类：div:target
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14_伪类选择器_目标伪类</title>
<style>
div {
background-color: gray;
height: 300px;
}
div:target {
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
// 点击去看第3个后的页面(跳转的背景为绿色)：
Ⅶ、伪类选择器的语言伪类：div:lang(en)
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>15_伪类选择器_语言伪类</title>
<style>
div:lang(en) {
color: red;
}
:lang(zh-CN) {
color: green;
}
</style>
</head>
<body>
<div>好好学1</div>
<div lang="en">好好学2</div>
<p>前端</p>
<span>你好</span>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅷ、伪元素选择器：div::first-letter、div::first-line、div::selection、input::placeholder、p::before、p::after
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>16_伪元素选择器</title>
<style>
/* 什么是伪元素？ ------ 很像元素，但不是元素（element），是元素中的一些特殊位置 */
/* 选中的是div中的第一个文字 */
div::first-letter {
color: red;
font-size: 40px;
}
/* 选中的是div中的第一行文字 */
div::first-line {
background-color: yellow;
}
/* 选中的是div中被鼠标选择的文字 */
div::selection {
background-color: green;
color: orange;
}
/* 选中的是input元素中的提示文字 */
input::placeholder {
color: skyblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before {
content:"￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p::after {
content:".00"
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?</div>
<br>
<input type="text" placeholder="请输入您的用户名">
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
</body>
</html>其二、结果为：
// 一进入页面后的页面(鼠标选中有背景和字体颜色)：
Ⅸ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482