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
