CSS3的nth-child() 和nth-of-type（）选择器，表格奇偶行变色

最新推荐文章于 2023-09-03 14:05:10 发布

hj纳滋

最新推荐文章于 2023-09-03 14:05:10 发布

阅读量582

点赞数

本文链接：https://blog.csdn.net/u012211233/article/details/51557521

版权

nth-child（）选择匹配其父元素，不论其类型。

nth-of-type（）选择匹配其父元素，区分类型。

例如

p:nth-of-type(2)
{
background:#ff0000;
}

<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

</body>

p:nth-of-type(2)

是第二个段落变成红色

p:nth-child(2)

是第一个锻炼变成红色

奇偶数匹配

odd代表奇数，even代表偶数

倍数写法

:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3)，可以这样写。n为自然数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hj纳滋

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css奇数偶数选择器

weixin_52311740的博客

07-17

1744

nth-child和nth-of-type的不同之处就是查找元素的方式不同。前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。

CSS系列： css和js隔行变色（.box li:nth-of-type属性）

云端-公子清

12-09

541

两种方式让css隔行变色js和css3属性.box li:nth-of-type <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...

参与评论您还未登录，请先登录后发表或查看评论

css3新增选择器:nth-of-type 奇偶选择器

爬楼梯的前端小白的博客

07-08

632

:nth-of-type(even) 偶数选择器 :nth-of-type(odd) 奇数选择器

【CSS3】nth-of-type(n)选择器

O(∩_∩)O

02-23

456

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是

CSS 通过伪类 nth-child 和 nth-of-type 实现奇偶选择器的区别

将PHP Web开发进行到底

09-13

2064

在前端开发项目中，遇到根据奇偶规则设置样式的场景，通常会用过:nth-child 或者:nth-of-type 来实现，但偶尔会遇到不生效或达不到预期的效果。本文将以通过实例代码详细介绍二者的使用方法及区别，希望对大家的学习和工作有所帮助。

css实现兼容火狐、IE的LI奇偶行颜色交替方法

09-24

总之，通过合理运用CSS的`:nth-child`伪类选择器和背景图片，我们可以轻松实现列表项的奇偶行颜色交替，同时保持良好的跨浏览器兼容性。这种方法不仅简单易懂，而且避免了使用JavaScript来动态修改样式，提高了网页...

当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同

09-25

2. CSS奇偶行颜色交替：在CSS中，使用:nth-child()选择器可以选取父元素下的特定子元素。例如，:nth-child(odd)选择器选取奇数行，而:nth-child(even)选择器选取偶数行。在提供的示例代码中，使用:nth-child(odd)为...

CSS.table.rar_Table_css table_table css_表格css

09-20

- 使用`nth-child`或`nth-of-type`选择器，可以给表格的奇偶行设置不同的背景颜色，如`tr:nth-child(even)`和`tr:nth-child(odd)`。 - 对于表头`th`，可以单独定义样式以区分普通单元格`td`，比如设置不同的字体...

jQuery和css3响应式斑马线表格美化插件

12-11

在斑马线表格美化方面，CSS3可以轻松实现隔行变色的效果，通过伪类`:nth-child(odd)`或`:nth-child(even)`来选择奇偶行并应用不同的背景颜色，达到视觉上的区分。此外，CSS3的媒体查询（Media Queries）使得设计可以...

网页里面表格隔行变色代码

11-20

当然，我们也可以使用CSS的`:nth-child()`伪类选择器自动处理奇偶行，避免为每行添加类名： ```css table tr:nth-child(even) { background-color: #F0F0F0; } table tr:nth-child(odd) { background-color: #...

详解css3中的:nth-of-type(n)

最新发布

SunPeng的博客

09-03

7212

【css】css奇数、偶数、指定数选择器：

nth-of-type() 详解

weixin_44051815的博客

12-29

1万+

nth-of-type() 详解 ele:nth-of-type(n)表示选择父元素下的第 n 个 ele 元素，其中 n 可以是正整数、公式或者关键字。同时， ele 一般是标签选择器。 <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 200px; margin: 100px auto; border: 1px solid #ccc; }

对于nth-of-type(n)的理解

corn78的博客

11-24

9825

定义和用法： :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。一、nth-of-type(n) (当n为数字时）先看下代码，在代码中具体讲解。这里我们在一个类名为father的盒子中写了五个p标签，样式表中用到了我们的nth-of-type伪类，这个样式也不难看懂。我们把这个选择器拆分开来理解，首先.father...

nth-of-type()

weixin_42481234的博客

09-25

373

css3中 nth-child 和 nth-of-type 的区别

qq_37899792的博客

04-26

481

nth-child 和 nth-of-type的下标都是从1开始的 nth-child 和 nth-of-type有什么不同？直接上例子，看代码注释就好 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</ti...

深入理解css3中 nth-child 和 nth-of-type 的区别

GG1234561123的博客

04-27

539

深入理解css3中 nth-child 和 nth-of-type 的区别在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。但是它们到底有什么区别呢？其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。文

jQuery选择器深入解析：伪类选择符nth-child的用法

jQuery不仅支持基本的CSS选择符，还扩展了许多CSS3的伪类选择符，包括`:nth-child`。`:nth-child`伪类选择符在CSS3中引入，而在jQuery中得到了良好的支持，它允许我们根据元素在父元素中的位置来选择元素。 `:nth-...