Question

我有一个脚本（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之后，我尝试使用其中一条评论和其他选择器中建议的：has（）伪类，但没有运气。

这个CSS4关系伪类可以完成这个技巧，但目前不支持：

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

我还尝试选择last-of-type li个不属于.centered兄弟的:not()元素，但li:not(.centered ~ li):last-of-type { height: 20vh; background-color: #Fcc; -webkit-transition: height 0.6s; }只支持简单的选择器，或者我只是没有得到如何正确链接选择器。

这是非工作选择器：

a = pd.DataFrame({"age" : [25, 25, 25, 26, 26, 25, 25, 27, 27, 25, 26, 26, 25, 25],
                  "category" : [1, 2, 2, 3, 1, 3, 1, 1, 2, 3, 2, 2, 1, 2]})

问题：是否有任何伪类和选择器的组合可以在纯CSS中完成这个技巧？

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

Answer 1

是否有任何伪类和选择器组合可以在纯CSS中完成这个技巧？

没有; :not(.centered ~ li)不起作用的原因确实是它目前仅支持简单选择器 - 如:has()，:not()只接受选择器4中的组合器。因为当前没有伪类接受组合器，唯一可用的兄弟组合器继续前进，在这方面你留下了非常有限的域语言。这就是为什么选择器的增加。

关于进展...... :has()伪类的进展已经呃。最后我听说，工作组仍在决定在CSS中允许一部分:has()或者将其分成自己的伪类，供应商将会看到他们可以在CSS中为此实现多少上班。但我认为还没有任何数据。

Answer 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

li的CSS替代：has（+ .class）关系伪类和li：not（.class~li）

2 个答案: