In front-end development, we may encounter such requirements: want the first part in the list to display different styles, want the even-numbered parts in the list to display different background colors, and want the last part of the list to display different styles The same...how do we achieve such a demand? In fact, if the previous file is developed by php, it can be realized by php loop statement + judgment statement + css style. However, if it is static code, php will not work. At this time, we can also achieve through CSS, CSS provides us with several very useful style parameters: first-child, last-child, nth-child (n). Below, look at their use in detail.
1、first-child
first-child represents the first tag in the select list. code show as below:
li:first-child{background:#090}
The above means, the background color of the first li module in the li list.
2、last-child
last-child represents the last label in the selection list, the code is as follows:
li:last-child{background:#090}
3、nth-child(3)
Indicates the third label in the selection list, the code is as follows:
li:nth-child(3){background:#090}
The 3 in the above code can also be changed to other numbers, such as 4, 5, etc. If you want to select the number of tags, fill in the number.
4、nth-child(2n)
这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。
5、nth-child(2n-1)
这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。
6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表示选择列表中的标签从0到3，即小于3的标签。
8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。
上面这些CSS样式是非常有用的，在我们的网页开发过程中，会派上非常大的用场，可以给我们的网页带来不一样的风格。如上一章中我们介绍的“为导航菜单添加分隔符”，就用到了 first-child。