li:nth-child(odd){background:#999;} 我们可以通过另外的方法选择奇数行,例如: 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):...
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school 嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解: 误解一:认为E:first-child选中E元素的第一个子元素。 误解二:认为E:first-child选中E元素的父元素的第一个E元素。 你是不是也曾这样理解这个选...
1. :first-child 选择器 :first-child选择器用于选择父元素中的第一个子元素。例如,如果我们有一个包含多个元素的父元素,我们可以使用:first-child选择器来选择第一个元素。 示例代码如下: <!DOCTYPE html>div:first-child{color:red;}第一个div元素第二个div元素第三个div元素 HTML Copy Output: 在上面的示...
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} 示例演示 在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博...
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child h1:first-child span:first-child :first-child 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码: ...
1 新建一个html文件，命名为test.html，用于讲解css如何使用:first-child选择器设置元素的样式。2 在test.html文件内，使用li标签创建一个列表，用于测试。3 在test.html文件内，设置ul标签的class属性值为myway，用于设置样式。4 在css标签内，通过class和“:first-child”选择器选中第一个li元素。5 在css标签内...
<!DOCTYPE html> CSS伪类选择器 .div{ width: 100px; margin: 10px; } /*选中元素的第一个元素*/ .div:first-child{ color: red; } /*选中元素的最后个元素*/ .div:last-child{ color: blue; } /*选中元素的第3个元素*/ .div:nth-child(3){ border: 1px solid red; } /*选中元素的...
我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个结构伪类选择器:first-child、last-child、nth-child(n)。 二、基本使用方法 1.常见使用方法 first-child:选择列表中的第一个标签。 举例:第一行字体显示为红色,代码如下: li:first-child{
:first-child 单独使用这个选择器不带任何前缀,选择的是作为 “某个元素” 的 “第一个子元素” 的元素 ,某个元素是文档里的任意元素(即所有元素),第一个子元素可以是任意的元素,要想明白这个子元素,很好的一个方式是使用jquery,在浏览器控制台使用 $(":last-child") 查看选择出来的元素就可以一目了然。