一文读懂伪类与伪元素 🔰 什么是伪类？ 伪类是添加到选择器的 关键字 ，指定要选择的元素的特殊状态。
典型的伪类关键字 在大多数情况下，伪类都与基础选择器搭配使用，下述是伪类在一些典型场景下的应用。
:hover 指针在
cssbutton:hover {
color: blue;
}注意: 在触摸屏上 :hover 基本不可用。不同的浏览器上:hover 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
:not :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
将所有不是
的元素颜色改为蓝色：
cssbody:not(p) {
color: blue;
}
/* 实测下述代码没有效果 */
:not(p) {
color: blue;
}注意: 在触摸屏上 :hover 基本不可用。不同的浏览器上:hover 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
:first-child 给所有
- 下的第一个
- 应用不同的样式
cssul li {
color: blue;
}
ul li:first-child {
color: red;
font-weight: bold;
}:active :active 表示的是鼠标从按下到松开的时间，下述代码表示 在不同状态下的样式。
cssa:link { color: blue; } /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { background: yellow; } /* 用户鼠标悬停 */
a:active { color: red; } /* 激活链接 */注意: :active 赋予的样式可能会被后声明的其他链接相关的伪类覆盖。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。
这种链接伪类先后顺序被称为 LVHA 顺序：:link > :visited > :hover > :active。
单独使用的伪类关键字 我们常见的伪类关键字的特征是以单个冒号:开头，跟随在基础选择器后面。
但是单独使用的伪类关键字也可以对页面产生效果， 例如：
通过 :focus 伪类，可以让任何元素获得焦点后的颜色变为红色。
css:focus {
color: red;
}更多伪类，见 MDN - 标准伪类索引
🔰 什么是伪元素？ 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
与伪类相同，一个选择器中只能使用一个伪元素。但是，伪元素必须紧跟在语句中的基础选择器之后。
例如，下述代码可以给页面中每个 标签前添加一个😃表情。
cssa::before {
content: "😃";
}相比于伪类，伪元素的使用方式更加固定，其基本语法：
cssselector::pseudo-element {
property: value;
}注意: 在书写伪元素时，你会见到单冒号 : 的写法，但此为CSS2过时语法，仅用于支持IE8，大多情况请书写双冒号 :: 来表示伪元素。
更多伪元素见 MDN - 标准伪元素索引
📌 伪类与伪元素共同使用 下面一个案例中，同时用到了伪类和伪元素：
用CSS实现一个开关样式，hover时触发，滑块为正方形，具体大小可随意，如下图
尽量实现如下要求，可实现一部分：
开关动作均有动画过度（滑块移位、背景色）只用一个dom元素实现开关的高度是固定的，但宽度不固定，即宽度为未知父元素的100%，宽度始终大于高度题目解读 由于只能使用一个 DOM 元素，而要区分滑块和背景的不同状态，故使用伪元素 ::before 在 .box 内部添加一个滑块，滑块采用 inline-block 方式展示，并且由 transition 属性指定过渡动画。
对于背景也采用了 transition 来指定过渡动画，并且二者都通过 :hover 触发。
实现代码 HTML
html
CSScss.box {
height: 50px;
width: 100%;
background-color: #c2d3e4;
transition: background-color 0.25s
}
.box::before {
content: "b";
color: white;
display: inline-block;
background-color: white;
position: relative;
top: 5px;
left: 5%;
height: 40px;
width: 35%;
transition: left 0.25s;
}
.box:hover {
background-color: #348fe4;
}
.box:hover::before {
left: 60%;
}
/* 父元素宽度任意 */
.father {
width: 100px;
}相关链接 代码片段
CSS选择器