关于nth-child的用法

最新推荐文章于 2024-08-26 16:48:02 发布

故事只若初见

最新推荐文章于 2024-08-26 16:48:02 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/qq_45424679/article/details/112689415

版权

本文详细介绍了CSS中的nth-child选择器，包括其工作原理、语法格式，并通过实例解析了如何使用:nth-child来选取特定位置的元素。无论你是前端新手还是经验丰富的开发者，这篇文章都将帮助你更好地理解和掌握这一强大的选择器。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

故事只若初见

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

伪类选择器之结构选择器：：noth-child(n)/:nth-of-type(n)

bing_JavaScript的博客

08-09

929

*{ margin: 0; padding: 0; } ul{ margin: 50px auto; width: 400px; list-style: none outside none; } l

jQuery中:nth-child选择器用法实例

12-04

本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下：此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...

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

【css】8.nth-child(2)

jieweiwujie的博客

12-28

870

div:nth-child(1)

CSS选择器nth-child()、first-child()、last-child()、not()

m0_46318298的博客

12-22

4991

CSS选择器nth-child()、first-child()、last-child()、not()

:nth-child(){}用法

暖一杯茶的博客

05-22

514

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_44932450 :first-child 选取第一个标签 :last-child 选取最后一个标签 :nth-child(2) 选取第二个标签 :nth-child(n) 选取第N个标签 :nth-child(2n) :nth-child(even) 选取偶数标...

nth-of-type(2)和nth-child(2)的区别

weixin_30337157的博客

01-30

173

<div class="test"> 　　<p>A元素</p> 　　<div>B元素</div> 　　<p>C元素</p> 　　<p>D元素</p> </div> 看下面的代码 $("p:nth-of-type(2)")//选择的是C元素 $("p:nth-chi...

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

kfepiza的博客

02-18

2405

第一个匹配的元素是 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 个，且为元素的元素。

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

11-21

在标题和描述中提到的代码示例中，开发者尝试使用`nth-child()`选择器为`<ul>`列表中的第一和第三个`<li>`元素设置不同的背景颜色。在IE9及以上版本，这个代码可以正常工作，但在IE8中，背景颜色无法显示。为了...

css :nth-child与:nth-of-type之小解

09-25

`:nth-child()`选择器用于选取父元素中具有特定索引位置的子元素。这里的索引位置是从1开始计算的，包括所有类型的子元素。例如，`p:nth-child(2)`会选择父元素中的第二个子元素，无论该元素是什么类型。在提供的...

详解CSS中:nth-child的用法

jie566的专栏

05-24

1400

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： Tips：还用低版本的IE浏览器的哥们请绕过！ :nth-child(2)选取第几个标签，“2可以是你想要的数字” 实例：代码： .demo01 li:nth-child(2

CSS3新增结构伪类选择器 - 选择第n个元素、nth-child

最新发布

听海边涛声

08-26

483

CSS3新增结构伪类选择器 - 选择第n个元素、nth-child

:nth-child()和:nth-of-type()选择器的区别

日常总结

04-25

692

p:nth-child(2) 要求该元素是p元素，且是父元素的第二个子元素p:nth-of-type(2) 要求该元素是父元素下的第二个p元素类似的还有，:nth-last-child、:nth-last-of-type:last-child、:last-of-type...

css 实现奇偶,:nth-child深度解析以及如何实现css奇偶选择器

weixin_39537680的博客

08-03

684

官方解释：p:nth-child(2)选择属于其父元素的第二个子元素的每个元素。我是表示很难理解。应该理解为，p元素的父元素下面的第二个p元素。no，不对！看下面的例子吧。p:nth-child(2){background:blue;}第1行P元素第2行P元素第3行P元素第4行P元素第5行P元素第6行P元素第7行P元素效果如下图貌似上面那个观点是正确的。看下面的代码，把p元素前面加一个sp...

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代码实现：很容易

CSS选择器 first-child nth-child

学习笔记

04-08

5665

:first-child 选择属于父元素的第一个子元素。 :nth-child(2) 选择属于父元素的第二个子元素。 :last-child 选择属于父元素的最后一个子元素。例子： .class ul li:first-child{display: none;} /*第一个li隐藏*/ p:nth-child(2) 选择属于父元素的第二个子元素的每个 &l...

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

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

06-30

3611

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

H5中nth-child(n)详解

weixin_44079801的博客

06-26

1926

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-child(n)</title> <style> /* n 可以是关键词。将

nth-child的使用方法