一.子元素的伪类 1):first-child 可以选中第一个子元素 2):last-child 可以选中最后一个子元素 3):nth-child 可以选中任意一个子元素 该选择器可以指定一个参数,指定要选中第几个元素 even 表示偶数位置的子元素 odd 表示奇数位置的子元素 4) :first-of-type :last-of-type :nth-of-type 和:first-chil...
1 首先打开编辑器新建一个HMTL文件 2 输入基础代码（小编使用ul标签做为演示）3 编写CSS选择【基数行】并添加样式核心代码：.list > li:nth-child(odd){ background: blue; font-size: 18px; color: #fff;} 4 编写CSS选择【偶数行】并添加样式核心代码：.list > li:nth-child(even){ background: golde...
:nth-child(2n)选取偶数标签,2n也可以是even 点此查看实例展示 .demo01 li:nth-child(2n){background:#090} :nth-child(2n-1)选取奇数标签,2n-1可以是odd 点此查看实例展示 .demo01 li:nth-child(2n-1){background:#090} :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一” 点此查看实例展示 ...
3 将内容区修饰完成后，打开预览效果查看，如图所示 4 然后开始对第一个li设置背景颜色以及字体颜色，ul li:nth-child(1){background-color:blue;color:white;}如图所示 5 第一个设置完成后，开始对第二个方块进行设置，第二个方块就是:nth-child(2){};代码如下ul li:nth-child(2){background-color:aqua;...
/* ul li:nth-child(even) { background-color: pink; } ul li:nth-child(odd) { background-color: hotpink; } */ /* n 是公式 但是 n 从0开始计算 */ /* ul li:nth-child(n) { background-color: pink; } */ /* 2n 偶数 类似于 even */ ...
* :first-child * 可以选中第一个子元素 * :last-child * 可以选中最后一个子元素 * :nth-child(num) * 可以选中任意位置的子元素; * 如果不写num的值则默认为1,效果和":first-child"伪类相同了; * 如果num的值为"even",则表示偶数位置子元素 ...
nth-child()详解如下: (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n ...
1.first-child 选择第一个子元素 first-of-type 选中子元素中第一个指定类型的元素 2.last-child 选中最后一个子元素 last-of-type 选中子元素中最后一个指定类型的元素 3.nth-child选中指定的第几个子元素 even关键字等同于2n odd关键字等同于2n+1 ...
tr:nth-child(even) { background-color: #f2f2f2; } </style> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>28</td> <td>男</td> </tr> <tr> <td>李四</td> <td>32</td> ...
你可以为:nth-child()提供一个正数作为参数。它表示要选择父元素中索引为该数值的子元素(此时的索引值从1开始)。例如: li:nth-child(2){ background:red; /*将第二个li元素的背景颜色设置为红色*/ } 2、关键字表示法。 你可以使用关键字odd或even来选择元素,even表示选择偶数项的子元素,odd表示选择奇数项...