前言：
目前同学们对“css列表样式怎么设置”大致比较重视，大家都需要学习一些“css列表样式怎么设置”的相关知识。那么小编也在网络上网罗了一些关于“css列表样式怎么设置””的相关文章，希望各位老铁们能喜欢，兄弟们快快来了解一下吧！基础代码
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS碰到的诡异</title></head><style> ul{ overflow: hidden; } li { width: 50px; height: 50px; line-height: 50px; text-align: center; background: lightblue; list-style: none; margin: 5px; float: left; }</style><body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></body></html>问题一：当列表的总数为4时才对列表项设置样式
想法一：
首先，我们可以用li:nth-child(4)来选中第4个列表项，但是并不是我们想要的；
我们要的是 总数为4 时选中 每一项
想法二：
把:nth-child()和兄弟选择符（~）结合起来，比如:nth-child(4),li:nth-child(4)~li。
可惜了，它只能命中第4个和之后的所有项。这想法跟列表总数没有关系，哪怕有8个命中的也是第4个和之后的。
难道这个任务对于css来说注定失败吗？
嘿嘿，还真不是！！！
不钓胃口，先上解决代码，在解释，
li:first-child:nth-last-child(4),li:first-child:nth-last-child(4)~li{ background: deeppink;}怎么理解选择思路？
先选中第一个元素在选中第一个后面所有的元素
这种条件下，如何命中第一个元素？
关键来了！！！
父元素的第一个子元素，肯定也是从后往前数的第四个子元素。
有哪个元素可以满足这个条件呢？
一个正好有四项的列表中的第一个元素
从代码上说就是：我们在找一个同时匹配：first-child和：nth-last-child(4)的元素。
最后，加上 li:first-child:nth-last-child(4)~li 解决问题！！！
问题二：当列表至少包含4项时，如何命中所有列表项
命中所有问题一已经实现，如何实现至少包含4项？
这个倒是很常见，n+4
所以，最终样式就是
li:first-child:nth-last-child(n+4),li:first-child:nth-last-child(n+4)~li{ background: deeppink;}问题三：当列表共包含4～6项时，如何命中所有列表项
分拆后其实就比问题二多了一个条件，且少于6项时，于是变成了
当列表总数多于4个，并且少于6个时，命中所有列表项
如何实现少于6个？ -n+6
所以，代码是
HTML更改：
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul>
CSS代码：
li:first-child:nth-last-child(n+4):nth-last-child(-n+6), li:first-child:nth-last-child(n+4):nth-last-child(-n+6) ～li{ background: deeppink;} 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css列表样式怎么设置
