史上最强大的伪类--has()-提升您的 CSS 技能

66 阅读2分钟

一、介绍

  简介:提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。之所以说它最为强大,是因为它可以通过后面及里面的元素确定前面或外面的元素的CSS样式。在之前的 CSS 选择器中,几乎所有的选择器都被刻意设计成了只能由前面的元素确定后面的元素并设定它们的样式,比如div p 或者 div + p选择器。

  背景:规范定制的比较早,但是由于性能的考虑,没有支持。只能使用js代码处理相关交互。

  兼容性:

image.png

二、基本用法和应用场景:

基本用法:

  1.选择父级元素:

    image.png

    image.png

  2.选择兄弟元素:

    image.png

    image.png

应用场景:

  1、替代:only-of-selector 增强 :only-of-selector选择所有没有兄弟元素,且具有相同的元素名称的元素。缺点:如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。

我们希望我们的选择器在目标之前或之后不存在匹配的同级时匹配

例子地址:codepen.io/ysgxm/pen/N…

  2、伪类混用 我们将创建一个元素列表。我们希望的行为是,当列表项悬停时,它会放大,并且它之前和之后的元素也会略微放大。

例子地址:codepen.io/ysgxm/pen/K…

  3、在范围内选择

一系列同级元素选择范围内的第一个元素:

  image.png

一系列同级元素选择范围内的最后一个元素:

  image.png

选择范围内的所有兄弟姐妹:

  image.png

例子地址:codepen.io/ysgxm/pen/m…

其他例子:

image.png