我们可以通过另外的方法选择奇数行,例如: nth-child(n+1) 、 nth-child(2n-1) 等。 代码如下: 代码语言:javascript 复制 /*First*/li:nth-child(n+1){background:#999;}/*Second*/li:nth-child(2n-1){background:#999;} nth-child(even)nth-child(even):选择列表的偶数行。 举例:偶数行背景显示为...
方法/步骤 1 :first-child伪类元素选择器初识 2 新建一个HTML文档，包含两个<P>元素 3 选择P元素，且是其父元素的首个子元素，设置背景色 4 保存文件查看，显示效果 5 调换P和H1的位置，让P成为BODY的第一个子元素 6 保存后，再次查看消失效果 7 :first-child 使用总结：注意事项 理解first-child的用法 ...
选择第一个元素:使用:first-child选择器。例如,选择第一个元素并将其字体颜色设置为红色: li:first-child {color: red; } 选择最后一个元素:使用:last-child选择器。例如,选择最后一个元素并将其字体颜色设置为绿色: li:last-child {color: green; } 选择第n个元素:使用:nth-child(...
p:first-child{background-color:yellow;} 尝试一下 » 定义和用法 :first-child 选择器匹配其父元素中的第一个子元素。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 选择器 :first-child4.07.03.03.19.6 注意::first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE> ...
:last-of-type和:last-child 这与:first-of-type 和 :first-child用法完全一致,表示最后一个,这里不做多讲解 有一点注意的是,:first-child是CSS2的范畴,意味着在IE8也能使用,而last-child是CSS3的规范,在同时都能满足需求时,如果需要更好的兼容性,建议使用:first-child。
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#fff} last-child用法: 1、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#fff} :nth-child(2)选取第几个标签,“2可以是你想要的数字” ...
使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接下来，我们来看一些针对元素行数的用法。使用:nth-child(even)可选取...
常见的一些用法就是 第一项 第N项 和 最后一项，这是开发中常用的选择要求 写法如下 ：first-child...
---》有时候first-child或者nth-child(1) 不起作用的原因 代码语言:javascript 复制 /*此时first-child不起作用,是因为.tap_con的父元素win的第一个子元素是.top,此时找到第一个子元素,但是其并不是.tab_con*/===.tab_con:first-child{background:#090!important;}===...