第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。 li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二种:倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。 li:nth-child(3...
nth-child(odd)nth-child(odd):选择列表的奇数行。 举例,奇数行背景显示为灰色,代码如下: 代码语言:javascript 复制 li:nth-child(odd){background:#999;} 我们可以通过另外的方法选择奇数行,例如: nth-child(n+1) 、 nth-child(2n-1) 等。 代码如下: 代码语言:javascript 复制 /*First*/li:nth-child(...
li:nth-child(n+6) { background: #ff0000; border-bottom: 1px; } 6、负方向范围,选中从第1个到第9个子元素。使用 :nth-child(-n+9) ,就相当让你选中第9个和其之前的所有子元素 li:nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } 7、前后限制范围,选择第6个到第9个 li:...
li:nth-child(n+4){color:pink} 7. 选择从第一个到第四个 这里的数字4也是可以根据你的需要替换的。 li:nth-child(-n+4){color:pink} 8.nth-last-child(3) 表示最后三个标签 li:nth-last-child(3){color:pink} 9.nth-last-child(3n) 表示3的倍数3.6.9…… li:nth-last-child(3n){color:pin...
CSS选取第几个标签元素:nth-child、first-child、last-child 1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: ...
4. 奇数、偶数位 :nth-child(odd) :nth-child(even) 5. 隔选择子元素 选择1,4,7,10 :nth-child(3n+1) 6.范围高级用法 使用nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。
四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
7.nth:child(3n-1) 代码语言:javascript 复制 ul li:nth-child(3n-1){background-color:green;}/*匹配(3-1),(6-1),(9-1)...*/ 上面的七种基本是nth:chlid的全部用法,可以混合使用来实现更复杂的筛选
The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within
1 新建一个HTML文档，用于承载表格和CSS 2 新建一个5行3列的表格 3 保存以上内容，在浏览器中预览效果，如图：4 定义一个内联样式，设置表格的偶数行（even）的背景色为浅灰色，示例： table tr:nth-child(even){ background: #ccc; } 5 再次保存以上文件，在浏览器预览效果，表格的偶数行（even）的背...