css里的伪类是什么(39)
CSS3新增了一些伪类，它们也非常易于理解。
CSS3新增伪类如下图所示的表格：
:empty表示选择空元素，空元素是指标签里面没有内容的元素。
比如：<p></p>，这就是个空的p元素。
但是，标签里面只要有空格，或者换行，都不算空元素。
:focus表示选择当前获得焦点的表单元素。
所谓获得焦点，就是指鼠标点进去就是获得焦点。
比如一个文本输入框，鼠标点进去，输入框里面就会有一个闪烁的竖线光标，这就是获得了焦点。
:enabled表示选择当前有效的表单元素。所谓有效的表单元素，就是标签上没有添加disabled这个属性的表单元素。
:disabled表示选择当前无效的表单元素。所谓无效的表单元素，就是指在表单元素上面添加了disabled属性，此时这个表单就是无效的。
:checked表示选择当前已勾选的单选按钮或复选框。
:root表示选择根元素，即<html>标签。所以:root就等价于标签选择器html。
接下来我在vscode和浏览器中简单的演示一下CSS3中新增的这几个伪类。
代码如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS3新增伪类</title><style>.para {width: 300px;height: 50px;border: 2px solid black; }.para:empty {background-color: red; }input:disabled {background-color: green; }input:enabled {background-color: orange; }input:focus {background-color: blue; }input:checked+span {color:white; }:root {font-size:20px; }</style></head><body><p></p><p></p><p></p><p><inputtype="text"></p><p><inputtype="text"disabled></p><p><h2>你认为以下哪位武术家最厉害？</h2><inputtype="checkbox"><span>陈鹤皋</span><inputtype="checkbox"><span>马保国</span><inputtype="checkbox"><span>雷雷</span></p></body></html>
请看上面的代码，
页面中有3个类名为para的p元素，我在CSS中给它们的宽度是300像素，高度是50像素，边框是宽度2像素实线黑色。
3个类名为para的p元素，只有第一个是空元素，用.para:empty可以选中这个元素，这里给它设置的背景颜色是红色。
页面中接下来有两个单行文本框，一个添加了disabled属性，另一个没有。添加了disabled属性的文本框就是无效表单，没有添加的就是有效表单。
无效的文本框我给了背景颜色是绿色，有效文本框我给了背景颜色是橙色。
:root是选择根元素，也就是选择html标签。我给html标签的字体大小是20像素。
CSS具有继承性，html标签是其他所有标签的祖宗，所以只要给html标签设置字体大小为20像素，页面上其他所有标签中的字体都会变成20像素，关于继承性后面会学习到。
页面中还有3个复选框，每个复选框后面都跟着一个span标签。
现在，这些代码在浏览器中的效果如下：
此时，第一个单行文本框，我没有点击它，所以还没有获得它的焦点，背景颜色还是橙色，当我点击它时，它的背景颜色就变成了蓝色。
三个武术家的复选框，因为我一个都没有点击，所以一个都没有选中。
当我用鼠标点击这三个复选框选中它们时，它们后面的文字就变成了白色。
在这里，input:checked+span是一个选择器的组合，input:checked表示选择"被勾选的复选框"，input:checked+span就表示选择"被勾选的复选框后面紧跟着的span元素"。
复选框勾选之后，颜色为white(白色)。
所以，当我点击那个有效的单行文本框时，效果如下：
当我勾选三个武术家的复选框时，效果如下：
因为浏览器背景是白色的，复选框后面的span中文字也变成白色之后，就看不到文字了。
