css 根据元素数量编写特定的样式

[jackPanyj]

css如何能基于兄弟元素的数量来匹配元素？ 也许这样问会有点懵逼，那请看下面的几个问题。

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  ...
</ul>

1. 当 li 只有一个的时候，为 li 设置背景色为红色
2. 当 li 有且只有四个的时候， 为 li 设置背景色为红色
3. 为第三个li及其之后的li设置背景色为红色
4. 当 li 的数量大于三个的时候为所有的li设置背景色为红色
5. 为第四个li及其之前的li设置背景色为红色
6. 当li 的数量小于四个的时候为所有的li设置背景色为红色
7. 当li的数量为二到六个的时候为所有的li设置背景色为红色

解决方案：

问题1： 当 li 只有一个的时候，为 li 设置背景色为红色

1. 对与第一个问题， css 会有一个伪类选择器 :only-child,来解决。 代码如下：

   li:only-child {
     background-color: red;
   }
   

   这等价于

   li:first-child:nth-last-child(1) {
    background-color: red;
   }
   

   对于:only-child 它就相当于是下面的一个快捷的写法。

问题二： 当 li 有且只有四个的时候， 为 li 设置背景色为红色

1. 对于第二个问题， 解决方案是这样的，

     li:first-child:nth-last-child(4),
     li:first-child:nth-last-child(4) ~ li {
       background-color: red;
     }
   

   li:first-child:nth-last-child(4) 一个正好有四个列表项的第一个列表 然后利用兄弟选择符 ～ 来选择它之后的所有兄弟元素。

   利用sass 来定义一个mixin

     @mixin n-items($n) {
       &:first-child:nth-last-child(#{$n}),
       &:first-child:nth-last-child(#{$n}) ~ & {
         @content;
       }
     }
   

   调用方法

     li {
       @include n-items(4) {
         background-color: red;
       }
     }
   

问题三： 为第三个li及其之后的li设置背景色为红色

1. 第三个问题的解决答案：

     li:nth-child(n+3) {
       background-color: red;
     }
   

问题四： 当 li 的数量大于三个的时候为所有的li设置背景色为红色

1. 第四个问题的解决答案：

     li:first-child:nth-last-child(n+3),
     li:first-child:nth-last-child(n+3) ~ li {
       background-color: red;
     }
   

   li:first-child:nth-last-child(n+3) 是当li 的数量大于三个的时候命中第一个元素， 然后利用兄弟选择符选中剩余的其他li

问题五： 为第四个li及其之前的li设置背景色为红色

1. 对于这个问题以及下一个问题与前两个雷同

   li:nth-child(-n+4) {
     background-color: red;
   }
   

问题六： 当li 的数量小于四个的时候为所有的li设置背景色为红色

1. 代码如下：

   li:first-child:nth-last-child(-n+4),
   li:first-child:nth-last-child(-n+4) ~ li {
    background-color: red;
   }
   

问题七： 当li的数量为二到六个的时候为所有的li设置背景色为红色

1. 此答案就是前俩个问题组合起来。

   li:first-child:nth-last-child(-n+2):nth-last-child(-n+6),
   li:first-child:nth-last-child(-n+2):nth-last-child(-n+6) ~ li {
     background-color: red;
   }
   

参考demo