树结构伪类
本章将介绍 DOM 树结构查询伪类，这类伪类虽然名为伪类，但行为上更接近于普通选器。本章中出现的伪类的使用频率可能会有差异，但这些伪类都是很实用的。
# :root伪类
# :root伪类和<html>元素
在XHTML 或者 HTML 页面中，:root 伪类表示的就是<html>元素。
两者间的区别：
:root伪类的优先级更高，伪类的优先级比标签选择器的优先级要高一个层次。- 对于
:root，IE9及以上的浏览器才支持，兼容性要逊于html标签选择器。 :root指所有XML格式文档的根元素，XHTML文档只是其中一种。
# :root伪类的应用场景
滚动条出现页面不跳动
:root { overflow-x: hidden; } :root body { position: absolute; width: 100vw; overflow: hidden; }1
2
3
4
5
6
7
8直接让居中定位计算宽度一直都不包含滚动条宽度，这样就一定不会发生跳动。
CSS变量 业界约定俗成，CSS变量写在
:root伪类中。之所以写在
:root伪类中，是因为这样做代码的可读性更好。同样是根元素，html选择器负责样式，:root伪类负责变量，这一点是约定俗成的，它们互相分离，各司其职。例如::root { /*颜色变量*/ --blue: #2486ff; --red: #f4615c; /*尺寸变量*/ --layerWidth: 1190px; } html { overflow: auto; }1
2
3
4
5
6
7
8
9
10
# :empty伪类
:empty伪类用来匹配空标签元素。<div class="cs-empty"></div>1.cs-rmpty:empty { width: 120px; padding: 20px; border: 10px dashed; }1
2
3
4
5此时，
<div>元素就会匹配:empty伪类，呈现出虚线框。:empty伪类还可以匹配前后闭合的替换元素，如<button>元素和<textarea>元素。例如:<textarea></textarea>1textarea:empty { border: 6px double deepskyblue; }1
2
3:empty伪类还可以匹配非闭合元素，如<input>元素、<img>元素和<hr>元素等例如:但实际开发中很少有需要使用:empty 伪类匹配非闭合元素的场景。
# 对:empty伪类可能的误解
文章更新于: 2024/01/08 21:33:58