. nth-child 详解

最新推荐文章于 2024-09-11 09:30:30 发布

贾兵BING

最新推荐文章于 2024-09-11 09:30:30 发布

阅读量587

点赞数

本文链接：https://blog.csdn.net/MR_JIABing/article/details/110915108

版权

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

贾兵BING

关注关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

CSS-nth-child

03-26

CSS-nth-child

nth-child详解（转）

weixin_42794596的博客

10-09

392

li:first-child{ color:blue; } li:last-child{ color:blue; }

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

CSS中 nth-child 与 nth-of-type 的区别

最新发布

上进！努力！！！

09-11

893

nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。

nth-child选择器 | 属性选择器详解

GR6080的博客

01-06

1万+

前端的兄弟想必都接触过CSS中一个神奇的玩意，不用添加class名可以轻松获取你想要的标签并给与修改添加样式，是不是很给力，它就是：nth-child 与属性选择器

CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀

qq_60839348的博客

11-28

2427

CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀

CSS的伪类选择器:nth-child()

kfepiza的博客

02-18

2964

第一个匹配的元素是 0 [=5x0]，但由于元素的索引是从 1 开始的而 n 从 0 开始，所以不会匹配任何元素。是一个非常强大的工具，它允许你根据元素在其父元素中的位置（序数）来选择特定的子元素。表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……表示第七个及其之后的元素：7 [=0+7]、8 [=1+7]、9 [=2+7]，等等。表示兄弟元素列表中的第 8 到第 15 个，且为元素的元素。

nth-child

ftm_csdn的博客

01-15

302

摘自http://www.douban.com/note/241126807/ 第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。 li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二种：倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的...

详解CSS3中nth-child与nth-of-type的区别

09-24

在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...

:nth-child

04-04

223

当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。只选择第五个元素 1 2 3 li:nth-child(5){ color: green; }

:nth-child()

u012578908的博客

01-20

265

规定属于其父元素的第二个子元素的每个 p 的背景色： p:nth-child(2) { background:#ff0000; }

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...

【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）

嗨，朋友你好！我是前端领域的工作者

06-30

3732

【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）

nth:child()选择器

qq_46241430的博客

04-04

1559

:nth-child()的理解和使用

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

几张图浅理解（会用） :nth-child()

a666666000的博客

09-20

2183

几张图带你浅理解（会用） :nth-child()

详解CSS nth-child与nth-of-type的元素查找方式

09-24

CSS中的nth-child与nth-of-type是两个用于选择元素的伪类选择器，它们常用于定位具体的元素以便进行样式设计。尽管它们有相似之处，但它们的工作原理却有着本质的不同。首先，让我们来解释一下nth-child选择器。...

nth-child的使用

胡世林的博客

05-02

1342

觉得这篇博客可能会帮到其他朋友之前在学习css3的使用，接触到了nth-child（）这一选择器，发现怎么也用不好，今天有空了，就去试了下，（只举一个例子）直接说吧，后代选择器：例子：.parent div:nth-child(1) 解说：--使用这个子类选择器的时候，需要注意，这是两个验证条件，是没有关系的必须满足第n个子元素是div的时候才可以触发，不是满足在他的子类

css选择器:nth-child()的用法

得意小门生的博客

10-13

6万+

: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-chil

:nth-child(x)

weixin_33890526的博客

01-02

141

2019独角兽企业重金招聘Python工程师标准>>> ...