css中使用选择器如何获取到当前元素的前一个相邻节点？

让人迷糊的 previous sibling

在jquery中可以直接使用 $(selector).prev() 来得到。但是直接使用css，很多地方都直接说没有提供的方法。如下关于 is there a "previous sibling" selector 的一个提问：

（图片来自：stackoverflow.com/questions/1…

:has 的出现

但是从2022年开始，随着各大浏览器厂商对于 :has 这一伪类的支持，逐渐打破了这一僵局。使用如下方式可以实现获取 指定元素的相邻前一个节点，如下：

/*选择span元素，这个元素的紧邻后一个元素是p，换句话说就是，p元素的紧前节点*/
.container:has(+p) 

如下，Edit fiddle - JSFiddle - Code Playground：

选择器大全

至于对其他的选择器比较全面的了解和学习，可以及参考如下w3c提供的官方说明：

（图片来自：www.w3.org/TR/selector…)

这里对于如下选择器语法的说明，相对更加容易理解：

Pattern	Represents	Description	Level
E F	an F element descendant of an E element	Descendant combinator	1
E > F	an F element child of an E element	Child combinator	2
E + F	an F element immediately preceded by an E element	Next-sibling combinator	2
E ~ F	an F element preceded by an E element	Subsequent-sibling combinator	3

示例

从Represents这列可以明显地看到它的每一句描述的主语是F，并且F在Pattern 这一列都是在 空格、>、+、- 这些符号的后面。通过这就能明确每一种所代表的含义。

• descendant
• child
• next-sibling
• subsequent-sibling

descendant jsfiddle.net/tuqgxwhy/28…

child

next-sibling

subsequent-sibling jsfiddle.net/tuqgxwhy/27…

:has的兼容性

因为这一伪类是在Selectors Level 4 中才出现的，各浏览器厂商的支持，几乎都从2022年才逐步开始，具体的兼容的情况如下：

（图片来自：caniuse.com/?search=%3A…

这也是我们在功能实现时，对兼容性的要求必须要考虑的一个重要因素。

Selectors level 4 是什么

在mdn web docs 上对应 :has 的说明中能够看到它对应的 specification 提到的 Selectors Level 4。前面提到的选择器的部分引用的实际上是 Selectors Level3 中的内容。

那么什么是 Selector Level呢，如下来自：

Selectors Levels 1, 2, and 3 are defined as the subsets of selector functionality defined in the [CSS1](https://www.w3.org/TR/REC-CSS1), [CSS2.1](https://www.w3.org/TR/CSS21/), and [Selectors Level 3](https://www.w3.org/TR/css3-selectors/) specifications, respectively. This module defines Selectors Level 4.

其中关于这个Level的说明，在 CSS Levels 中说明了，为什么 CSS 不采用传统的 versions的概念，而使用 Level 代替的缘由。

reference

stackoverflow.com/questions/6…