| 元素中的第一个元素。<li> 关键字：odd表示奇数，等同于:nth-child(2n)；even表示偶数，等同于:nth-child(2n+1)。
<li>格式为(an+b)公式：a表示周期的长度（步长 ），n表示计数器（从 0 开始 ），而b则表示偏移值。
如下示例代码展示了:nth-child(n)伪类(实现表格隔行换色效果)的用法：
nbsp;html>
<meta>
<meta>
<meta>
<title>nth-child伪类</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th,
td {
border-top: 1px solid lightcoral;
text-align: center;
}
/* 最后一行单元格在底部增加一个边框效果 */
tr:last-child td {
border-bottom: 1px solid lightcoral;
}
/* 实现隔行换色 */
tr:nth-child(even) {
background-color: aquamarine;
}
</style>
ログイン後にコピー
| 姓名 |
区域 |
| 梵云飞 |
西西域 |
| 欢都落兰 |
南国 |
| 石宽 |
北山 |
| 涂山红红 |
涂山 |
代码运行结果如下图所示：
:nth-child(n)伪类的n参数用法中比较复杂的是使用(an+b)公式用法，如下示例列举了一些公式用法：
<li>:nth-child(5n)：定位元素的序号是5 [=5×1]、10 [=5×2]、15 [=5×3]等。
<li>:nth-child(3n+4)：定位元素的序号是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。
<li>:nth-child(-n+3)：定位元素的序号是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。
:nth-child(n)伪类与:nth-last-child(n)伪类和:nth-of-type(n)伪类与:nth-last-of-type(n)伪类的区别，类似于:first-of-type伪类与:last-of-type伪类和:first-child伪类与:last-child伪类的区别。
:empty
:empty伪类是用来定位没有任何子级元素或文本内容的元素，其中文本内容包含了空白。但是HTML的注释是不影响:empty伪类定位元素的。
如下示例代码展示了:empty伪类的用法：
nbsp;html>
<meta>
<meta>
<meta>
<title>empty伪类</title>
<style>
body {
/* 开启flex布局 */
display: flex;
}
.box {
background: pink;
height: 80px;
width: 80px;
margin: 0 20px;
}
.box:empty {
background: lime;
}
</style>
<div></div>
<div>这个元素的背景是粉色的</div>
<div>
<!-- 这是一个注释 -->
</div>
ログイン後にコピー 代码运行结果如下图所示：
:root
CSS中的:root伪类选择器比较简单，它代表的就是
如下代码展示的:root伪类的用法：
:root {
height: 100vh;
width: 100vw;
background-color: dodgerblue;
}ログイン後にコピー 代码运行结果如下图所示：
3、UI元素状态伪类选择器
使用UI伪类选择器可以根据元素的状态匹配元素，下方列表将简单总结这类选择器：
| 选择器 |
说明 |
| ：enabled |
选择启用状态的元素 |
| ：disabled |
选择禁用状态的元素 |
| ：checked |
选择被选中的input元素（只用于单选按钮和复选框） |
| ：default |
选择默认元素 |
| ：valid |
根据输入验证选择有效或者无效的input元素 |
| ：in-range/：out-of-range |
选择在制定范围之内或者职位受限的input元素 |
| ：required/：optional |
根据是否允许：required属性选择input元素 |
4、输入伪类选择器
关于表单输入的伪类，主要介绍三种常用的，具体如下：
<li>:enabled和:disabled
<li>:read-only和:read-write
<li>:checked
:enabled和:disabled
:enabled和:disabled一这组伪类选择器分别表示禁用状态与可用状态，这组为了使完全对立的。
:enabled伪类的实际用处并不大，因为大多元素默认都是可用的，所以写不写意义并不大。
如下代码展示了:enabled和:disabled的用法：
nbsp;html>
<meta>
<meta>
<meta>
<title>:enabled和:disabled的用法</title>
<style>
input:enabled {
outline: none;
}
input:disabled {
/* 禁用状态背景为灰色 */
background-color: gray;
}
</style>
<input>
<input>
ログイン後にコピー 代码运行结果如下所示：
由上图我们看到禁用状态的<input>的背景颜色为灰色。
:read-only和:read-write
:read-only和:read-write一这组伪类选择器分别表示只读和可写状态，同样的:read-write也很鸡肋，因为默认就是可读写，示例代码如下所示：
nbsp;html>
<meta>
<meta>
<meta>
<title>:read-only和:read-write</title>
<style>
input:read-write {
outline: none;
}
/* 只读状态 */
input:read-only {
color: red;
outline: none;
}
</style>
<input>
<input>
ログイン後にコピー 代码运行结果如下所示：
我们可以看到，只读的<input>的文字颜色为红色。
:checked
:checked伪类可以说是众多伪类选择器中使用频率很高的一个伪类选择器，该选择器表示选中的状态，就比如下面这个例子：
nbsp;html>
<meta>
<meta>
<meta>
<title>checked伪类</title>
<style>
input:checked {
/* 为选中的增加阴影 */
box-shadow: 2px 2px 2px 2px lightcoral;
}
</style>
<input>
<input>
ログイン後にコピー 
关于:checked伪类，最佳实践是配合<label></label>元素来实现，现在我们就通过:checked和<label></label>元素来实现一个开关的效果。
示例代码如下：
nbsp;html>
<meta>
<meta>
<meta>
<title>开关</title>
<style>
[type="checkbox"] {
width: 44px;
height: 26px;
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 开关样式 */
.cs-switch {
display: inline-block;
width: 44px;
height: 26px;
border: 2px solid;
border-radius: 26px;
background-color: currentColor;
box-sizing: border-box;
color: silver;
transition: all .2s;
cursor: pointer;
}
.cs-switch::before {
content: "";
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #fff;
transition: margin-left .2s;
}
:checked+.cs-switch {
color: blueviolet;
}
/* 选中移动 */
:checked+.cs-switch::before {
margin-left: 18px;
}
/* 禁用状态 */
:disabled+.cs-switch {
opacity: .4;
cursor: not-allowed;
}
</style>
<!-- 普通状态 -->
<input>
<label></label>
<!-- 选中状态 -->
<input>
<label></label>
<!-- 禁用状态 -->
<input>
<label></label>
<!-- 选中禁用状态 -->
<input>
<label></label>
ログイン後にコピー 运行效果如下所示：
5、逻辑组合伪类
:not()否定的伪类
<li>优先级为0，优先级由括号中的表达式决定； :not(p)由p决定
<li>可以不断的级联；
input:not(:disabled):not(:read-only) {} ;表示处于不禁用，也不处于只读的状态
<li>不可出现多个表达式，也不支持选择符；
li:not(li, od); 尚未支持
:not()的巨大的用处在于告别重置的问题；
重置web中的样式，就好比我们在项目中经常使用到的：添加.active类名来控制样式的显示与隐藏/改变样式，往常的写法都是：
.cs_li {
display: none;
}
.cs_li.active {
display: block;
}ログイン後にコピー 而我们可以使用:not()伪类，可以更好的实现：
.cs_li:not(.active) {
display: none;
}ログイン後にコピー 在列表中的设置<li>的边框时也可使用其:not()
.cs_li:not(:nth-of-type(5n)){
margin-right: 10px; // 除5的倍数项都设置右边的外边距
}ログイン後にコピー :is()的作用是简化选择器
平时我们开发中经常会用到类似下面的语法：
.cs_li_a > img,
.cs_li_b > img,
.cs_li_c > img {
display: none;
}ログイン後にコピー 使用:is()简化可写成：
:is(.cs_li_a, .cs_li_b, .cs_li_c) > img {
display: none;
}ログイン後にコピー 还有一种嵌套之间的关系，相互嵌套，交叉组合得出结论；如下方所示
ol ol li,
ol ul li,
ul ul li,
ul ol li {
margin-left: 20px;
}ログイン後にコピー 使用:is()伪类强化，则只需要几行代码：
:is(ol, ul) :is(ol, ul) li{
margin-left: 20px;
}ログイン後にコピー <strong>:where()</strong>
:where()与上方的:is()相同，唯一不同的是级别永远为0，也不受括号里面的表达式影响；
使用的方法与:is()完全相同，但优先级永远是0；底下的括号中的优先级完全被忽略，俩句是同一个优先级，并且级别等同于.conten选择器
:where(.article, section) .conten {}
:where(#article, #section) .conten {ログイン後にコピー （学习视频分享：web前端入门）
| 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
