根据兄弟元素的数量来设置样式(CSS揭秘学习笔记)

Posted 2020-07-16

CSS揭秘学习笔记

 

li.length == 4

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    /* 当列表正好包含四项时，命中所有列表项 */
}

li.length >= 4

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
    /* 当列表至少包含四项时，命中所有列表项 */
}

li.length <=4 

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
    /* 当列表最多包含四项时，命中所有列表项 */
}