CSS '： 添加了一个自定义逻辑，以基于其他选择器(而不是其自己的选择器)查找元素。has'
我不得不承认，最强大的机器之一是CSS引擎，但有时很难只使用CSS来做某些事情，即使只是为了改变一些颜色。例如，如果我要求你从CSS中的子元素中找到一个父元素，通常你会被卡住。
CSS是以某种方式设计的，给定一个元素，你可以指定其子级的视觉属性。因此，它或多或少是从自上而下的方法设计的，就像HTML DOM树一样。首先从元素作为根开始，然后通过选择器深入挖掘其分支和叶子。
脚本
我是一名JavaScript开发人员，所以过去当这些问题出现时，我只需要写几行JS代码，例如：
Document.getElementById('root')
有时版本更复杂，但或多或少我可以找到元素，即使它在其中一个DOM分支中很远。这里没有什么新鲜事，我们已经这样做了将近二十年。但坦率地说，JavaScript很重。如果我不必这样做，我尽量不要在JavaScript中这样做。没错，我是一名JavaScript开发人员，但现在我把CSS作为我解决UI问题的第一个工具，仅仅是因为它更便宜。
断续器
信不信由你，CSS每天都在添加新功能。我们觉得它变化很快的原因是没有人跟踪CSS规范，更不用说所有这些浏览器兼容性了。似乎为我们打开了与父节点相关的大门的功能之一称为 。如果您还不知道视频，可以观看。我会等你回来的。:has
我们不是直接找到一个元素，而是通过询问它是否具有或包含另一个选择器来查找它。让我们回顾一下选择器：
a img {}
上面的选择器要求内部.这很容易，但这也是为什么我们找不到父母的原因，因为我们对不感兴趣，好吧，我们真正想做的是：imgaimg
a:has(img) {}
啊，如果包含一个，那么这就是我们想要找到的。就是这样?你可能会说。是的，这真的使不可能成为可能。aimga
正文：有()
很多时候，当我制作一个网站时，我想在弹出一个模态时改变风格。现在在我看来，我只需要执行以下操作：body
一行代码?让我们尝试使用JavaScript完成上述操作，祝您好运。此外，如果您可以在前端框架中将JavaScript版本与少于五行代码集成。
所以现在的问题不再是找到父级，而是改变它以找到具有某些东西的节点。在某种程度上，这为需要找到一个遥远的元素的问题提供了另一条途径。最重要的是，我们可以立即对发现的元素进行操作。
CSS 添加了一个自定义逻辑，用于基于其他选择器(而不是自己的选择器)查找元素。这将使从现在开始找到父节点的不可能的任务成为可能。:has
京公网安备 11010802030320号