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

最新推荐文章于 2022-09-20 16:41:52 发布

转载最新推荐文章于 2022-09-20 16:41:52 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flxy-1028/p/6053670.html

本文详细解释了CSS中nth-of-type与nth-child选择器的区别及使用方法，并通过实例展示了如何为不同类型的子元素设置样式。

---恢复内容开始---

nth-of-type这一类的选择器是针对同类型的子元素进行计算；

nth-child这一类的先择器是连同父元素中的所有子元素一起计算；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*h2:nth-child(even){*/
           /*background: blue;*/
       /*}*/
      /*h2:nth-child(odd){*/
           /*background: aquamarine;*/
       /*}*/
        h2:nth-of-type(even){
            background: blue;
        }
       h2:nth-of-type(odd){
           background: yellowgreen;
       }
    </style>
</head>
<body>
<div>
    <h2> 标题1</h2>
    <p>内容 ......三万字</p>
    <h2>标题2</h2>
    <p>内容 ......三万字</p>
    <h2>标题3</h2>
    <p>内容 ......三万字</p>
    <h2>标题4</h2>
    <p>内容 ......三万字</p>
    <h2>标题5</h2>
    <p>内容 ......三万字</p>
    <h2>标题6</h2>
    <p>内容 ......三万字</p>
</div>
</body>
</html>

标题1

内容 ......三万字

标题2

内容 ......三万字

标题3

内容 ......三万字

标题4

内容 ......三万字

标题5

内容 ......三万字

标题6

内容 ......三万字

还有相似的有选择器nth-last-child和nth-last-of-type;

转载于:https://www.cnblogs.com/flxy-1028/p/6053670.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30706691

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS基础知识点整理（二）

m0_48622990的博客

08-10

286

background属性 background-color:指定要使用的背景颜色 background-position:指定背景图像的位置 background-size:指定背景图片的大小 background-repeat:指定如何重复背景图像 background-origin:指定背景图像的定位区域 background-clip:指定背景图像的绘画区域 background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动 background-image:.

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

09-24

在实际使用中，nth-child和nth-of-type的选择方式区别主要体现在它们如何在兄弟元素中进行选择。nth-child(n)会从所有子元素中选择第n个元素，不论这些元素是什么类型。而nth-of-type(n)则会首先确定所有与它匹配的...

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

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

a666666000的博客

09-20

2495

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

div:nth-child(n)

weixin_40626699的博客

04-03

4856

指当前div的第n个子元素，n是从1开始例： <div> <p>test1</p> <p>test2</p> <div> div:nth-child(2)是指第二个p标签

css 奇偶数选择器nth-child

PrimaryColor

09-16

1万+

div:nth-child(odd){ } //奇数行 div:nth-child(even){ } //偶数行

css中:nth-child()和nth-of-type有何区别详解

李十三的博客

07-26

675

伪类选择器的区别

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

09-24

在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。...下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。

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

09-25

CSS中的`:nth-child()`和`:nth-of-type()`是两种选择器，它们在选取HTML元素时有不同的侧重和行为。本文将详细解析这两个选择器的工作原理及其差异。 `:nth-child()`选择器用于选取父元素中具有特定索引位置的子...

CSS中 :nth-child 的使用

一尾流莺半世情缘

01-15

862

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

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

GR6080的博客

01-06

1万+

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

CSS3伪类子代选择器nth-child(),first-child的用法！

海贼王某人的博客

01-15

2012

先来段HTML代码 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 选择box里面第一个div添加样式： .box > div:first-child { color: #7F7F7F;

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

css 选择器（选择第几倍的元素），nth-child（2n+1）

PrimaryColor

09-18

6965

直接上代码：选择2倍的第一个元素： div:nth-child(2n+1) 选择2倍的第二个元素： div:nth-child(2n+2) 选择3倍的第一个元素： div:nth-child(3n+1) 选择3倍的第二个元素： div:nth-child(3n+2) 选择3倍的第三个元素： div:nth-child(3n+3) 以此类推。 ...

li:nth-child(1)---div:nth-child(-n+2) 详解

Alisa_wu666的博客

09-08

3701

我总是会有点奇葩的烦恼，如果看这个列子会更加明白 $("#box li:nth-child(1)").css("color", "red"); 通俗的理解就是选择box 下面第一个li?后面自己写了一次，发现不对，ppp下面的每个li 都被选中了 <div id="box"> <ul> <li>John1</li> <li>Karl</li> <li>B.

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: nth-child()选择前几个元素

weixin_39015132的博客

08-24

6万+

原文链接前言渲染列表时，需要设置前3个元素的margin-top值与其他的不同。使用 :nth-child(-n+3){ margin-top: 12px; } 扩展选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-c...

详解CSS中:nth-child的用法

蕉下客

07-13

2719

jquery选择器功能强大，最近设置样式的时候把css和jquery选择器混了，现写出帖子提醒自己：下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： Tips：还用低版本的IE浏览器的哥们请绕过！特别注意：jquery:eq()选择器下标从0开始，nth-child(**)从1开始，而css中nth-child(**)下标从1开始。:nth-child(2)选取第几个标签，“2

CSS3 伪类选择器 nth-child() 的用法

codeHeYiQing的博客

03-16

887

CSS3 伪类选择器 nth-child() 的用法 :nth-child()选择某个元素的一个或多个特定的子元素，从这个元素的第一个子元素开始算 .main div:nth-child(3){/*参数是整数*/ background-color: red;/*选择main中的第三个div，将背景颜色改成红色*/ } ...

CSS中div:nth-child(n) 与 div＞:nth-child(n) 的区别

bestadc的博客

04-19

1503

说下div:nth-child(n) 与 div>:nth-child(n) 的区别 div:nth-child(n) 表示：寻找父元素的第n个子元素是div div>:nth-child(n) 表示：父元素div的第n个子元素是什么都可以

nth-of-type和nth-child区别

08-19

nth-of-type和nth-child是CSS中用来选择特定元素的伪类选择器。 nth-of-type选择器用于选择同类型元素中的特定位置的元素。它的语法是`:nth-of-type(n)`，其中n可以是一个具体的数字、关键字even（偶数）、odd...