html - CSS 替代 li :has(+ . class) 关系伪类和 li :not(. class ~ li)

Question

我有一个脚本 ( JsFiddle here ) 检测 li block 元素何时在页面上垂直居中并为其分配一个 .centered 类以使其更大通过 CSS。

.centered {
    height: 30vh;
    background-color: #bbb;
    -webkit-transition: height 0.6s;
}

一旦确定了中心元素，我就设法通过以下方法选择下一个兄弟元素:

.centered + li {
    height: 20vh;
    background-color: #ccc;
    -webkit-transition: height 0.6s;
}

当我尝试在纯 CSS 中选择 .centered 元素之前的兄弟元素时出现问题

看了this question from 2011之后我尝试使用其中一条评论和其他选择器中建议的 :has() 伪类，但没有成功。

这个 CSS4 关系伪类可以解决问题，但目前不受支持:

li:has(+ .centered) {
    height: 20vh;
    background-color: #Fcc;
    -webkit-transition: height 0.6s;
}

我还尝试选择 li 元素的 last-of-type 不是 .centered 的兄弟元素，但是 :not() 仅支持简单的选择器，或者我只是不知道如何正确链接选择器。

这是不起作用的选择器:

li:not(.centered ~ li):last-of-type {
    height: 20vh;
    background-color: #Fcc;
    -webkit-transition: height 0.6s;
}

问题:是否有任何伪类和选择器的组合可以在纯 CSS 中实现这一目的？

我希望在提出这些问题后已经取得了一些进展。

Answer 1

Is there any combination of pseudo classes and selectors that could do the trick in pure CSS?

没有； :not(.centered ~ li) 不起作用的原因确实是它目前只支持简单的选择器——比如 :has(), :not( ) 将只接受 Selectors 4 中的组合子。由于当前没有接受组合子的伪类，并且唯一可用的同级组合子继续前进，因此在这方面您只能使用非常受限的域语言。这就是向选择器添加这些内容的原因。

至于进展... :has() 伪类的进展是嗯。最后我听说，工作组仍在决定是在 CSS 中允许 :has() 的子集还是将其分离到自己的伪类中，供应商将看看他们有多少可以在 CSS 中实现以使其工作。但我认为还没有任何数据。