css最最强大的伪类选择器:has选择器

33 阅读1分钟

has 选择可以根据一个相对[选择器]来选中某个元素,如

  • div:has(p) 表示当 div 中有 p 时,选中 div

  • div:has(>p) 表示当 div 有子元素 p 时,选中 div

  • div:has(+p) 表示当 div 后面紧跟一个 p 时,选中 div

  • div:has(~p) 表示当 div 后续有 p 类型兄弟元素时,选中 div

注意上面的三个选择器都可以不使用 div 而直接使用 :has()

  • :has(p) 选中任何一个内部有 p 的元素

  • :has(>p) 选中任何一个有 p 子结点的元素

  • :has(+p) 选中任何一个后面紧跟 p 的元素

  • :has(~p) 选中任何一个后续 p 兄弟的元素