CSS碰到的诡异情况：当列表总数为4时才对每一项设置样式【转载】-CSDN博客

本文链接：https://blog.csdn.net/ht990711/article/details/142335913

基础代码

<!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;
}

转载自：https://zhuanlan.zhihu.com/p/133432135