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元素。 你是不是也曾这样理解这个选...
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child h1:first-child span:first-child :first-child 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码: p:first-of-type h1:first-of-type ...
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} 示例演示 在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博...
我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个结构伪类选择器:first-child、last-child、nth-child(n)。 二、基本使用方法 1.常见使用方法 first-child:选择列表中的第一个标签。 举例:第一行字体显示为红色,代码如下: li: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标签内...
但是,但是,但是,我遇到这两个css选择器之后,刷新了我的看法,用css就能实现1到9张图不同张数排版不一样的问题。对就是first-child和nth-last-child 配合使用,一起走进这2个选择器吧! 1.first-child 第一个元素 当前选择元素第一个元素,例如:.box p:first-child 就是box下面的第一个p元素,注意这里如果你...
CSS-选择器 Caddy 在职软件开发小白一枚 目录 收起 主要分为以下 5 类: 符号解析 提示 :before :checked :default ::first-letter :first-line :in-range :indeterminate :invalid :lang :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :optional :out-of-range :requ...
:first-child 方法/步骤 1 :first-child伪类元素选择器初识 2 新建一个HTML文档，包含两个<P>元素 3 选择P元素，且是其父元素的首个子元素，设置背景色 4 保存文件查看，显示效果 5 调换P和H1的位置，让P成为BODY的第一个子元素 6 保存后，再次查看消失效果 7 :first-child 使用总结：注意事项 理解first-...
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项,并将序列号颜色变为红色。 HTML代码: Link1 Link2 link3 CSS代码: ol > li{ font-size:20px...