15 分钟带你感受 CSS :has() 选择器的强大

文章预览

作者：xingba https://juejin.cn/post/7349360925185802251 最近看到了许多关于 :has() 选择器的知识点，在此总结下来。 MDN 对 :has() 选择器 的解释是这样的： CSS 函数式 伪类 [1]   :has()  表示一个元素，如果作为参数传递的任何 相对选择器 [2] 在锚定到该元素时，至少匹配一个元素。这个伪类通过把 可容错相对选择器列表 [3] 作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。 下面一起来感受下 :has() 选择器的强大之处吧。 :has() 选择器选择父元素和前面的兄弟元素 邻接兄弟选择器（ + ）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随 元素之后的 元素： p  +  img 通用兄弟关系选择器（ ~ ）用来选中一个元素 后面的 所有兄弟元素。例如，选中 元素之后的所有的 元素： p  ~  img css 并没有提供 ………………………………