css nth-child奇偶匹配

最新推荐文章于 2023-09-19 13:59:34 发布
最新推荐文章于 2023-09-19 13:59:34 发布
阅读量415 收藏
点赞数
分类专栏： css 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44161722/article/details/128631834
版权

奇偶匹配
:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

作者观点：表格奇偶数行定义样式就可以写成
.table > tr:nth-child(even) > td {background-color: #ccc;} （偶数行）
.table > tr:nth-child( odd) > td {background-color: #ccc;} （奇数行）

以对_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css控制隔行样式（CSS伪类选择器 奇偶匹配nth-child(even)）
木子木木的专栏
01-22 4595
:nth-child(even) 控制偶数样式 :nth-child(odd)控制奇数样式 :nth-child(2n+1)控制2n+1行样式 语法： :nth-child(an+b) 下面就把CSS3标准中nth-child()用法大致介绍给大家： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一种：简单数字序号写法 :nth-child(num...
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
CSS中的nth-child()属性
欢欢的博客
10-27 3万+
first-child、last-child、nth-child、nth-last-child、nth-of-type first-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child， 但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始 1、fi...
详解CSS3中:nth-child的用法
aa_mmnn的博客
09-10 1928
CSS3中:nth-child的实际用途：不适用低版本的IE浏览器！ （1）:nth-child(n + 4)选取大于等于4的标签，其中"n"为整数，下同 .demo01 li:nth-child(n+4){background:#090} （2）:nth-child(-n + 4)选取小于等于4的标签 .demo01 li:nth-child(-n+4){background:#090} （3）:nth-child(2n)选取偶数标签，其中的2n也可以写
css选择最后两个元素、奇数个，偶数个
最新发布
JackieDYH的博客
09-19 2344
要选择最后两个元素，可以使用。要选择奇数个元素，可以使用。要选择偶数个元素，可以使用。表示最后几个元素的个数。
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
12-02
对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
jQuery中:nth-child选择器用法实例
12-04
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。... 代码如下:$(“li:nth-child(2)”).css(“color”,”blue”) 以上代码能够将父元素下第二个li元素中的字体颜色设置为蓝色。也可以计算父
css :nth-child与:nth-of-type之小解
09-25
css :nth-child与:nth-of-type之小解,需要的朋友可以参考下。
:nth-child选择器
allway2的博客
04-01 1697
:nth-child 概述 :nth-child(an+b)这个CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例： 0n+3或简单的3匹配第三个元素。 1n+0或简单的n匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本n和1n的匹配方式不一致。1n和1n+0是一致的，可根据喜好任选其一来使用。） 2...
css奇数偶数选择器
web前端开发
11-30 3万+
前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-c...
jquery奇偶选择器_jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
weixin_33918788的博客
02-26 115
对此，我把CSS3标准中nth-child()用法大致介绍下：CSS3伪类选择器：nth-child()简单的归纳下nth-child()的几种用法。第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/第二：nth-child(a...
CSS选取指定位置标签first-child、last-child、nth-child
weixin_30449453的博客
07-17 193
1、first-child 选择列表中的第一个标签。 2、last-child 选择列表中的最后一个标签 3、nth-child(n) 选择列表中的第n个标签 4、nth-child(2n) 选择列表中的偶数标签 5、nth-child(2n-1) 选择列表中的奇数标签 6、nth-child(n+3) 选择列表中的标签从第3个开始到最后 7、nth-child(-...
html 伪类样式偶数,CSS伪类nth-child怎么使用
weixin_36331764的博客
06-18 923
CSS中有一个伪类nth-child，这个伪类该怎么使用呢？接下来的这篇文章就来给大家介绍一下CSS中的伪类nth-child的使用方法，我们来看具体的内容。nth-child是一个伪类，它为选择器添加条件，并允许您将样式应用于子元素的第n个(nth)。当你想要交替设置背景颜色以便在包含许多项目的表格中轻松查看时，nth-child就变得非常有用。下面我们就来看nth-child的使用方法nth-...
父元素下的奇数偶数元素选择器[nth-child-odd/even]
qq_26239917的博客
03-12 1906
table tr:nth-child(odd):hover{background:gainsboro} table tr:nth-child(even):hover{background:greenyellow}
CSS3 :nth-child(n)使用注意
IT技术宅-北方的刀郎
02-07 4万+
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素
css中选取子元素
生存不忘生活
08-08 5655
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
css选择器:nth-child()的用法
丹
10-10 3768
:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 偶数标签:nth-child(2n) 奇数标签 :nth-child(2n-1) 选择从第6个开始的，直到最后:nth-child(n+6) 选择第1个到第6个 :nth-child(-n+6) 两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-child() 选择器 :nth-last-chil
解决IE8下CSS3选择器 ：nth-child() 不兼容的问题
音韵者天
05-09 2万+
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
nth-child n大于2
08-24
当使用CSS3中的nth-child()伪类选择器时，可以通过nth-child(n)来直接匹配第n个元素，其中n是大于0的整数。例如，li:nth-child(3)将匹配列表中的第三个元素。 同时，可以使用nth-last-child(even)来选择倒数的偶数个元素，其中even也可以写成2n。例如，.demo01 li:nth-last-child(even)将选择倒数的偶数个li元素，并为它们设置背景颜色。 另外，可以使用nth-last-child(odd)来选择倒数的奇数个元素。例如，.demo01 li:nth-last-child(odd)将选择倒数的奇数个li元素，并为它们设置背景颜色。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)](https://download.csdn.net/download/weixin_38571759/13238488)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [详解CSS3中:nth-child的用法](https://blog.csdn.net/aa_mmnn/article/details/120217177)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值