我可能回答了我自己的问题,但我非常好奇.
我知道CSS可以选择父项的单个子项,但如果其父项具有一定数量的子项,则可以支持对容器的子项进行样式化.
例如
container:children(8) .child {
//style the children this way if there are 8 children
}
我知道这听起来很奇怪,但是我的经理让我检查一下,没有找到任何东西,所以我决定在结束搜索之前转向SO.
所以我有这个查询来获取last-child有7个或更多元素的时间
li:nth-last-child(7) ~ li:last-child {
background: red;
}
只要存在最少的元素,这适用于任意数量的元素7.我想做的是相反的,得到的first-child.
我尝试了以下内容
li:nth-last-child(7) ~ li:first-child {
background: red;
}
但这不起作用.奇怪的是,我可以使用以下内容获取第二个子元素
li:nth-last-child(7) ~ li:nth-child(2) {
background: red;
}
我知道这是非常复杂的CSS,甚至可能不可能,但我想知道它是否可以完成.如果可能的话,我宁愿不使用JS.我猜这是一个挑战;)