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

【问题标题】：CSS alternative to li:has(+ .class) relational pseudo class and li:not(.class ~ li)CSS 替代 li:has(+ .class) 关系伪类和 li:not(.class ~ li)
【发布时间】：2015-08-24 02:23:58
【问题描述】：

我有一个脚本 (JsFiddle here)，它检测 li 块元素何时在页面上垂直居中，并为其分配一个 .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 后，我尝试使用其中一个 cmets 和其他选择器中建议的 :has() 伪类，但没有运气。

这个 CSS4 关系伪类可以做到这一点，但目前不支持：

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

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

这是不工作的选择器：

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

问题：是否有任何伪类和选择器的组合可以在纯 CSS 中发挥作用？

我希望自从提出这些问题以来已经取得了一些进展。

【问题讨论】：

** 字体真的很让人分心。
答案是否定的。放弃并在 Javascript 例程中为前面的 li 分配一个唯一的类。
您正试图在 CSS 中“倒退”，并让一个元素影响较早发生的事物的样式。做不到。
@torazaburo 感谢您的评论，这让我意识到我可以从中间元素之前的元素开始我的 jQuery 选择，然后在 CSS 中使用.top + li 和.top + li + li 向下选择。示例：jsfiddle.net/3t4r8xy1/1

标签： html css css-selectors pseudo-class

【解决方案1】：

是否有任何伪类和选择器的组合可以在纯 CSS 中发挥作用？

没有； :not(.centered ~ li) 不起作用的原因确实是它目前只支持简单的选择器——比如:has()，:not() 将只接受选择器 4 中的组合器。由于目前没有伪类接受组合器，并且唯一的可用的兄弟组合器继续前进，在这方面你只剩下非常有限的领域语言。这就是对选择器进行这些添加的原因。

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

【讨论】：

【解决方案2】：

在@BoltClock 和@torazaburo 评论确认不可能之后，我更改了我的初始jQuery 选择起始元素

从这里：

        middleElement = this;
        $(this).toggleClass("centered", true);

到这里：

        middleElement = this;
        $(this).prev().toggleClass("top", true);

无需添加额外的 javascript 代码，我就可以更改我的 CSS 选择器。

发件人：

.centered { /*selects the middle element */ 
        height: 30vh;
        background-color: #bbb;
        -webkit-transition: height 0.6s;
    }

.centered + li { /*selects the next sibling after middle element */ 
        height: 20vh;
        background-color: #ccc;
        -webkit-transition: height 0.6s;
    }

li:has(+ .centered){ /*not supported at time of writing*/
        height: 20vh;
        background-color: #Fcc;
        -webkit-transition: height 0.6s;
    }

收件人：

 .top, .top + li + li { /* selects the siblings before and after the middle one*/
        height: 20vh;
        background-color: #ccc;
        -webkit-transition: height 0.6s;
    }


 .top + li { /* This selects the middle element*/
        height: 30vh;
        background-color: #bbb;
        -webkit-transition: height 0.6s;
    }

>> JSFiddle

【讨论】：