标签: 选择器优先级

CSS选择器经历了从基础到逻辑选择器的演进，分为基础、复合、关系和伪类/伪元素四大类。:is()、:where()、:has()、:not()等逻辑选择器功能强大，但需注意特异性和性能。掌握选择器优先级、现代浏览器特性适配和性能优化，能编写更高效可维护的CSS代码。

`:root`和`html`选择器虽指向同一元素，但浏览器处理逻辑不同，`:root`具文档类型自适应性和更高特异性，更适合定义全局CSS变量，配合媒体查询可实现动态响应式。工程实践中应优先使用`:root`，并关注CSS层叠层规范对优先级的影响。

`:root`与`html`选择器在CSS中作用范围相似，都指向HTML根元素。关键区别在于优先级：`:root`作为伪类，优先级高于`html`。若两者定义相同属性，`:root`声明会覆盖`html`声明。通常用于定义全局CSS变量，确保文档范围内可访问。