我认为每个前端开发者都应该知道,:has() 不仅仅是一个“父级选择器”,subgrid 如何和为何、如何使用内置 CSS 语法进行嵌套、如何让浏览器在标题文本换行之间取得平衡,以及如何使用容器查询单元。
多年来,我们一直构想一个“父级选择器”。现在终于来了!采用 :has() 伪选择器的形状。您可以想到哪些有趣的 :has() 用例?这里最吸引人的就是打破你的心智模式。这会让人想到“我可以换种方式处理这些风格吗?”。
只是因为这些东西都相当新,而且我感觉很多人都不知道这些东西。或者说,即使他们知道,也不甚了解,他们可能需要一个通俗易懂的解释,说明这是什么,为什么他们应该关心,以及一些参考代码。也许你就是这样的人。
让我们一步步来亲身体验一下,网络开发人员可以利用这个渴求已久的工具做些什么。事实证明,:has() 伪类不仅仅是一个 “父选择器”。在经历了几十年的死胡同之后,这个选择器能做的事情远不止这些。