css3 nth-child(n) 的一个坑

最新推荐文章于 2024-02-01 10:49:45 发布

原创最新推荐文章于 2024-02-01 10:49:45 发布 · 1.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍如何使用 CSS 的 :nth-child(n) 选择器来选取特定位置的子元素，并通过实例展示了如何将样式应用于第 n 个子元素。

css匹配选择第n个子元素可以使用:nth-child(n) 选择器，其匹配属于其父元素的第N个子元素，不论元素的类型

<div class="content-wrap">
                <h1>hahaah</h1>
                <h1>hahaah</h1>
                <p>xixi1</p>
                <p>xixi2</p>
                <p>xixi3</p>
                <p>xixi4</p>
            </div>

.content-wrap p:nth-child(3) {
color:red;
}

变红色的是 xixi1

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KKgege

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用css属性:nth-child(n)匹配选择第n个子元素

12-13

加入要让第二个 th 占table表格总宽度的50%. 复制代码代码如下: <style type = “text/css”> table tr th:nth-child(2) </style> 第一个第二个第三个定义： :nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N （这里选择第2个）个子元素（这里子元素是th），不论元素的类型。

关于CSS中nth-child有层级嵌套的情况

u010048197的博客

05-26

1269

关于nth-child(odd)和nth-child(even)有层级嵌套的选择欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代

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

css :nth-child(an + b) 的坑

352328759的博客

10-21

312

css 的 nth-child 已经不是什么新概念了作用就是匹配其父元素的"某个"子元素注: 第一个子元素的序号为 1 其实它还可以匹配"某些"子元素, 如: :nth-child(odd) { /* 序号为奇数的子元素 */ } :nth-child(even) { /* 序号为偶数的子元素 */ } 再拓展一下, 可以控制周长和偏移, 如: p:nth-child(an + b){...} 使用公式 (an + b)。描述：a 表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。注

学习记录307@CSS3中nth-child()不起作用的问题

教练我想学编程

09-07

8809

先看下面的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 被变为红色的是第几个p? */ div p:nth-child(2){ color: red; } </style> </head> <body> <div

:nth-child的坑用:nth-of-type解决

qq_41818857的博客

02-03

392

大的大

微信开发者nth-child问题

qq_52966774的博客

08-04

929

微信小程序nth-child问题

CSS3 :nth-child() 选择器---挖坑

weixin_30947043的博客

07-13

164

E:nth-child(n) 语法： E:nth-child(n){ sRules } 说明：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。(也就是说，会检查从body开始的每个元素的第N个子元素是不是E元素，如果是的话，就附加上相应的CSS样式) 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素该选择...

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

得意小门生的博客

10-13

7万+

: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的使用方法

热门推荐

Evan's Blog ٩(๑❛ᴗ❛๑)۶

06-09

8万+

一、需求描述在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。举例：第一行字体显示为红色，代码如下： li:first-child{ c

CSS3 :nth-child(n)用法

IT_datouer的博客

11-05

7486

CSS3 :nth-child(n)用法 :nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素注意：n是从1开始的如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素 <style> p:nth-child(1){

CSS3 - :nth-child()选择前几个元素

idomyway的博客

06-27

3万+

/* 选择第n个，n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的，直到最后 */ :nth-child(n+6){} 两者结合使...

CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child

colin5210的博客

06-22

1万+

CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child、not

nth-child（n）、first-child、last-child用法

aiyumo1993的博客

02-26

1万+

注：nth-child(n)选择器匹配父元素中的第n个子元素。 n可以是一个数字，一个关键字，或者一个公式。 nth-child（n）用法： 1、nth-child(3) 表示选择列表中的第3个标签，代码如下： li:nth-child(3){background:#fff} 1 2、nth-child(2n) 表示选择列表中的偶数标签，即选择第2、第4、第6…… 标签，代码如下： li:nt...

css 中 nth-child、first-child、last-child 的使用（选中第一个，第几个，第几个到第几个，最后一个等）

KLW75

08-11

1万+

可以配合 li 标签使用，选择一列中的哪些标签。 1.first-child选择列表中的第一个标签 2.last-child 选择列表中的最后一个标签 li:first-child{color:red} li:last-child{color:pink} 3.nth-child(n) 这里的n为数字，表示选择列表中的第n个标签例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数，选中2、4、6……...

【CSS】css选择器和css获取第n个元素（:nth-of-type(n)、:nth-child(n)、first-child和last-child）

m0_61049675的博客

02-01

3049

二、:nth-of-type、:nth-child的区别 :nth-of-type(n)：选择器匹配属于父元素的特定类型的第N个子元素所有兄弟节点中找到第三个p标签背景为红色。所以，3背景为红。 :nth-child(n)：选择器匹配属于其父元素的第 N 个子元素，不论元素的类型找父元素的第三个子元素，如果该子元素为p，则其变为黄色，如果，第三个子元素不是p元素，则没有子元素的背景变为黄色。 :first-child：获取元素的第 1 个子元素 :last-child：获取元素的最后一个个子元素效

CSS中的选择器nth-child(n)和nth-of-type(n)的区别

qq_40890601的博客

05-17

1409

nth-child(n)和nth-of-type(n)的区别区别就是后者多了一个类型限制，不计算前面出现的子元素。举个栗子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <style> span:nth-child(2) { color: #ff0000; } span:nth-of-type(2) {

CSS3新增选择器nth-child等

a1209849629的博客

04-14

2308

CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 <style type="text/css"> .list div:nth-child(2){ background-color:red; } </style> ...... <div class="list">...

css选择器 nth-child

郝啊的博客

08-19

1752

css选择器 nth-child 总述一：nth-child 1.1 nth-child(n) 父元素下的第n个子元素，n必须大于0，索引都是从1开始。 1.2 nth-child(odd) 父元素下的奇数子元素等同于 nth-child(2n-1) 1.3 nth-child(even) 父元素下的偶数子元素同样区分子元素类型等同于nth-child(2n) 1.4 nth-child(an+b) 公式计算 n可以为0 1.5 first-child

Css-:nth-child 的用法

wax9092的博客

06-04

5897

主要例举了一下css :nth-child 伪类选择器用法

css3中nth-child()的用法

m0_52518047的博客

04-23

1万+

nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是“不论元素的类型这句话”，好多人容易误解这句话。现在提出一个需求，如下图所示，将第二行和第三行的字体颜色改为红色和蓝色 <div class="father1"> <p>1234</p> <p>12345</p> <p>12345</p> </div> css代码实现：很容易