一、需求描述
在开发过程中，会碰到一些选择器的需求：
例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。
我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。
二、使用方法的代码示例
1.常见使用方法
first-child first-child：选择列表中的第一个TAG.html" target="_blank" class="relatedlink">标签。
举例：第一行字体显示为红色，代码如下：- li:first-child{color: red;}
举例：第三行字体显示为蓝色，代码如下：- li:nth-child(3){color: blue;}
举例，奇数行背景显示为灰色，代码如下：- li:nth-child(odd){ background: #999; }
代码如下：- /*First*/
- li:nth-child(n+1){ background: #999; }
- /*Second*/
- li:nth-child(2n-1){ background: #999; }
举例：偶数行背景显示为土黄色（不要在意那些细节），代码如下：- li:nth-child(even){ background: #F6E0AF; }
代码如下：- li:nth-child(2n){ background: #F6E0AF; }
2.更加灵活的使用方法
上面是几种比较常见的选择方法，我们还可以通过 CSS 更灵活的进行选择，有下面几种方法：
nth-child(-n+n) nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个，下同）。
举例：前三行背景色设置为绿色，代码如下：- li:nth-child(-n+3){ background: #2cae1d; }
举例：第五行及以后背景色设置为蓝色，代码如下：- li:nth-child(n+5){ background: #0ab1fc; }
举例：倒数第三元素字体设置为红色，代码如下：- li:nth-last-child(3){ color: red; }
nth-last-child(n+n) nth-last-child(n+n)：选择倒数第 n 个之前的元素。
举例：倒数第三个及之前的元素字体设置为粗体，代码如下：- li:nth-last-child(n+3){ font-weight: bold; }
nth-last-child(3n) nth-last-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。
举例：第3、6、 . . . 三的倍数行背景色设置为橙色，代码如下：- li:nth-child(3n){ background: orange; }
举例：第1、4、7 . . . 行背景色设置为红色，代码如下：- li:nth-child(3n+1){ background: red; }
|
1956
0
©2015-2022 www.tuyuanma.com 版权所有 Sitemap.xml
提升卡
置顶卡
沉默卡
变色卡
千斤顶
赣公网安备36112102000036号
赣ICP备17001544号-10