使用 :has() 作为 CSS 父选择器及其他更多内容
原文中文，约8400字，阅读约需20分钟。
📝
内容提要
CSS选择器 level 4中定义了:has()伪类，可以根据元素内部情况应用CSS样式。:has()可与其他伪类和组合器结合使用，实现各种功能，如根据图像有无为元素应用不同布局，根据表单输入栏状态为表单应用不同样式等。还可用于表单状态样式、CSS Grid布局和暗模式切换。
❓
Q&A
:has()伪类在CSS中有什么作用？
:has()伪类可以根据元素内部的情况应用CSS样式，允许开发者根据子元素的存在与否来改变父元素的样式。
如何使用:has()实现无JavaScript的表单状态样式？
可以使用:has()结合表单输入伪类，如:focus-visible，来为表单应用样式，而无需JavaScript。
:has()如何与CSS Grid布局结合使用？
:has()可以用于根据元素是否包含图像来调整CSS Grid中元素的占用空间，例如让包含图像的卡片占用更多的网格区域。
:has()与其他选择器的结合使用有什么优势？
:has()可以与子组合器、同级组合器等结合使用，提供更灵活的选择器功能，能够实现复杂的样式应用。
:has()的引入对CSS选择器有什么影响？
:has()的引入被视为CSS选择器的一场革命，开启了新的可能性，使得开发者能够更灵活地控制样式。
目前哪些浏览器支持:has()伪类？
截至2022年，Safari和Chromium浏览器已支持:has()，而Firefox的实现正在开发中。
🏷️
