1.这一节很有趣，也是很实用的。我常常遇到这样的问题，给一个html标签取名字很烦恼（当页面数量很多把css写在一个文件的时候），那么尝试使用一下子元素选择器吧

2.练习 子元素选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素

3.我们要实现的效果，根据数量不同来给li标签设置不同样式
就像下面这样：

当li数量为7时的样式 当li数量为6时的样式

小练习

html

<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设置基本样式

ul{  
  padding: 0; 
   list-style: none;
}

li{  
  display: inline-block;
  margin: 0 1em 0 0; 
  text-align: center;
  padding: .7em 1em; 
  border-radius: .5em;
  color: white; 
  background: tan;
}

现在的样子就像这样：

普通的样式

第二步：
设置选中时的样式

background: deeppink;
position: relative;

添加小勾

li::before{
  position: absolute;
  right: -.5em; top: -.2em;

  width: 1.2em;
  height: 1.2em;
  content: '\2713';
  border-radius: 50%;
  background: yellowgreen;
}

现在的样子是这样子的：

选中时的样式

第三步：
练习
nth-child()
first-child
last-child

首先我们来看看first-child

li:first-child{  
  background: deeppink; 
  position: relative;
}

li:first-child::before{ 
  position: absolute; 
  right: -.5em;    top: -.2em;  
  width: 1.2em;  
  height: 1.2em;  
  content: '\2713';
  border-radius: 50%;  
  background: yellowgreen;
}

first-child选中第一个元素

其次是last-child()

last-child选中最后一个元素

如果我们需要选择任意其中一个，使用nth-child(n)

:nth-child(2)选中第二个元素

我们需要选中一个区间的话

li:nth-child(n+2):nth-child(-n+3){    
  background: deeppink;  
  position: relative;
}

li:nth-child(n+2):nth-child(-n+3)::before{  
  position: absolute; 
  right: -.5em;    top: -.2em;  
  width: 1.2em; 
  height: 1.2em; 
  content: '\2713';  
  border-radius: 50%;
  background: yellowgreen;
}

解释一下
：nth-child(n+i)选择第i个元素后的所有元素（包括第i个），我们称呼其为集合A

：nth-child(-n+j)选择第j个元素前的所有元素（包括第j个），我们称呼其为集合B

我们取集合A和集合B的合集，就是我们所选中的区域

选中2~3的集合

有一种特殊的情况，就是我们要选择第i个到最后一个时，我们这样写更简单

li:nth-child(n+i)

更加实用的情况

那么掌握了这些之后，我们来练习对不同数量的设置不同的样式

也就是我们最上面的图所想要达到的效果，也可以用这种方式来实现自适应布局

那么问题来了？我们怎么通过纯CSS知道有几个li标签呢？

先来练习最简单的，我们想为3个以及3个以上的标签集合设置勾选样式

第一步：
确定数量

li:first-child:nth-last-child(i)

存在一个li标签既是第一个元素又是倒数第i个（i为我们想设置的集合长度）标签，那么这个集合的长度就是i

那么i个以上的集合呢？我们用以下选择器表示

li:first-child:nth-last-child(n+i)

打个比方，我们要选择3个及以上的集合，就可以这样写

li:first-child:nth-last-child(-n+3),
li:first-child:nth-last-child(-n+3)~li{

}

效果会是这样的：
只要li标签集合超过3个（包括3个），那么整个集合设置成勾选样式
如果少于3个集合，整个集合设置成默认样式

进阶的写法 -- 选择数量为i~j的集合设置样式

li:first-child:nth-last-child(n+i):nth-last-child(-n+j),
li:first-child:nth-last-child(n+i):nth-last-child(-n+j)~li{

}