学习 CSS 时，我觉得伪类选择器就像神奇咒语一样好用。通过给选择器添点儿词儿，就能轻松地搞定元素的状态检测。比如说，想要改变某元素的样式，无需修改 HTML 文件，用这种方法加上关键词，让浏览器自动找出来符合条件的元素，看看他们有啥特别之处，再据此制定相应的样式。这样，就能玩出很多好玩的动态效果，如鼠标移上去变色，点击后更亮，或者选中文档中特定的子元素，如第一个子元素（first-child）或最后一个子元素（last-child）等等。接下来，我会告诉大伙儿怎么巧妙运用这些便利的小技巧来解决实际问题。
动态伪类选择器
/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}
选择器:伪类 {
属性 : 属性值;
}
动态伪类就是网页依据你的行为确定要显示哪个元素。你上网时，网页会根据我们的移动改变页面布局。有时用JS随便改改网页可能让人摸不着头脑，因为有的元素是固定不动的，还有些是根据状态变化而呈现出来的。但是，动态伪类选择器就不同了。举个例子，:visited选泽器可以记录你访问过的网页链接，无论何时何地点击过这些链接，:visited都能精确找到。再来看看:active，一听就知道它代表当前你的鼠标正在点中的那个元素。
结构伪类选择器
CSS里有个奇怪的东东叫”结构伪类”，根本就不用费心去设置那些烦人的id和class！告诉你一个小秘密，用:first-child，轻而易举就能找到第一个同胞弟弟；试试看:last-child，神奇，只要一点就能选中余下的那位。下面是代码展示，简单明了，上手飞快！
除了刚刚说的那些，结构伪类选民器还有两个特别好用的功能呢：:first-of-type和:last-of-type。前者能帮你选中一堆元素里面的老大，后者就是稀罕货，专挑最后那个下手。不过得小心点儿有时候:first-of-type跟:first-child挺像的，用不好就会出丑！
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
:nth-child()伪类
狐妖小红娘
涂山红红
涂山苏苏
你们知道吗?:nth-child(n)和:nth-last-child(n)，这俩都是CSS3新增的选择器，用法基本相同。不过要记住区别在于:nth-LAST-child(n)是从后往前算的。至于那个“n”，有时候是个具体数字，有时候是an+b这样的形式，或者还有 even 或 odd 的说法。
p:first-of-type {
color: red;
}
p:last-of-type {
color: blue;
}
看到没，如果你想找啥都没有（不含空格的）元素，那就用`:empty`这个伪类呗。放心，就算加个HTML注释也不耽误事儿照样能准确帮你找出来！
其他常见伪类
提到CSS，你知道吗？除了那些大家都熟悉的伪类外，还有好多超级实用又常被忽略的UI伪类哟。例如，有这个神奇的选择器能检查input元素上”必填”标签是不是OK;还有那俩特别厉害的开关按钮- enabled和:disabled，这不就是我们电脑鼠标上那个小旋钮，用起来特方便，瞬间就能控制网页元素！
‘delete’这个功能，主要是你挑好了要用的东西就用它标记出来，其实和我们平时选商品或者电影之类差不多。在做网页设计时，经常会用到它来设置选项卡、菜单等，用起来还挺有意思的！
nbsp;html>empty伪类 body { /* 开启flex布局 */ display: flex; } .box { background: pink; height: 80px; width: 80px; margin: 0 20px; } .box:empty { background: lime; }这个元素的背景是粉色的
来！咱们再挑战下厉害的又好玩儿的技能，试试is()函数这个伪类怎么样？复杂判断感情瞬间变得超简单！
想要让你的网页好看又好玩，就要学好也得会用CSS的伪类选器。不仅能提升用户体验还能提高做网页的速度
:root {
height: 100vh;
width: 100vw;
background-color: dodgerblue;
}
。
评论0