CSS伪类、伪元素
一、伪类
① :hover
鼠标🖱悬停时的伪类，如：
/* 鼠标悬停到.box上时背景颜色变为红色 */
.box:hover {
background-color: red;
}
② :active
鼠标🖱点击时的伪类，如：
/* 鼠标点击时背景颜色变为灰色 */
.box:active {
background-color: grey;
}
③:not()
不选择指定的选择器，如：
/* 选中所有用了.box类选择器且不是h1标签的元素 */
.box:not(h1) {
font-size: 16px;
}
④ :focus
输入表单得焦点时的伪类，如：
/* input获得焦点后背景变为粉红色 */
input:focus {
background-color: pink;
}
⑤ :first-child
父容器中第一个元素，且这个元素类型必须指定类型一致，有点不好直接理解，没关系，看代码:happy:
/* .box的第一个孩子，且必须是p标签，才选中 */
.box p:first-child {
color: red;
}
⑥ :last-child
父容器中最后一个元素，且这个元素类型必须指定类型一致
/* .box的最后一个孩子，且必须是p标签，才选中 */
.box p:last-child {
color: red;
}
⑦ :nth-child()
父容器中指定序号的元素（序号从1开始），且这个元素类型必须指定类型一致
/* .box的第二个子元素，且必须是div类型 */
.box div:nth-child(2) {
width: 200px;
}
/* n范围为[0,+oo)，所以 2n + 1 范围 [1, +oo)，即选中.box中序号为1，3，5，...等元素，且必须是div类型 */
.box div:nth-child(2n + 1) {
width: 200px;
}
⑧ :nth-last-child
从父容器中倒着取指定序号的元素，且这个元素类型必须指定类型一致
/* .box的倒数第二个子元素，且必须是div类型 */
.box div:nth-last-child(2) {
width: 200px;
}
/* 选中.box1中倒数第一个，倒数第三个，...等元素，且必须是div类型 */
.box div:nth-last-child(2n + 1) {
width: 200px;
}
⑨ :first-of-type
父容器中第一个指定类型的元素，如：
/* 选中.box中第一个div，将高度设为100px */
.box div:first-of-type {
height: 100px;
}
⑩ :last-of-type
父容器中最后一个指定类型的元素，如：
/* 选中.box中最后一个div，将高度设为100px */
.box div:last-of-type {
height: 100px;
}
⑪ :nth-of-type
父容器中指定类型的元素第几个，如：
/* 选中.box中第二个div */
.box div:nth-of-type(2) {
height: 100px;
}
/* 选中.box中第1, 3, 5, ...个div */
.box div:nth-of-type(2n + 1) {
height: 100px;
}
⑫ :nth-last-type-of
与:nth-of-type取值顺序相反
⑬ :checked
勾选状态的表单，如：
<body>
<input type="radio" chekced/>
<input type="checkbox" checked/>
</body>
<style>
input:checked {
width: 30px;
height: 30px;
}
</style>
⑭ :disabled
选择禁用状态的表单，如：
<body>
<input type="radio" disabled/>
<input type="checkbox" disabled/>
</body>
<style>
input:disabled {
width: 30px;
height: 30px;
}
</style>
⑮ :enabled
选择可用状态的表单，如：
<body>
<input type="radio"/>
<input type="checkbox"/>
</body>
<style>
input:enabled {
width: 30px;
height: 30px;
}
</style>
二、伪元素
① ::before
在元素内容前插入一个虚拟元素
② ::after
在元素内容后插入一个虚拟元素
③ ::selection
用户选中的文本
④ ::placeholder
表单元素的占位符文本
以上伪元素使用方式如下：
<body>
<h1>
请输入你的名字
</h1>
<input type="text"/>
</body>
<style>
/* h1前添加[ */
h1::before {
content: '['
}
/* h1后添加] */
h1::after {
content: ']'
}
/* h1中文本选中时改为红色 */
h1::selection {
color: red;
}
/* input占位字符颜色设置为灰色 */
input::placeholder {
color: grey;
}
</style>
