of-type和child的区别

最新推荐文章于 2023-10-25 11:59:55 发布
原创 最新推荐文章于 2023-10-25 11:59:55 发布 · 578 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了网页元素选择器的使用技巧，详细讲解了nth-of-type、nth-last-of-type、nth-child、nth-last-child、only-of-type、only-child等选择器的功能与应用，以及first-child、last-child、first-of-type、last-of-type的选择规则。通过实例分析，帮助开发者更高效地定位与操作网页元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


nth-of-type,nth-last-of-type 先排除非指定标签再进行排序

nth-child,nth-last-child不排除非指定标签进行排序


only-of-type 不允许包含非指定标签

only-child 允许包含非指定标签 但只能有唯一指定标签 


first-child,last-child 第一个必须是指定标签才有效，

first--of-type ,last-of-type  先排除非指定标签，指定标签的第一个有效

gqomg
关注
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 1045
先从最不容易理解的only-child，only-of-type说起吧，理解这两个后面的都好理解了。 only-child 选取条件：需要有父元素（不包含body元素），父元素下只有一个元素，且该唯一个元素为指定元素。 a:only-child{ color:blue; } <body> <div> <div> <a>a标签1</a> </div> </div> <div> <div&
CSS：好玩的‘伪类’系列之——(:only-child与:only-of-type)
gavincz的博客
04-30 1319
:only-child 官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式 :only-of-type 官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式 注意： 在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...
：nth-of-type（n）和：nth-child（n）的基友关系
zhanglianglily的博客
04-23 5776
：nth-of-type（n）和：nth-child（n）的基友关系 2018年05月22日 21:50:46weixin_41957484阅读数：4053 一开始写样式的时候喜欢全部元素都来个class，后面发现这样一个页面下来很多个class，起名字起到发慌，然后老师说该多用 逻辑关系来写样式，就是这种第几个孩子啊这种，不知道你们有没有这种烦恼，要用的时候觉得哇，type和child这...
css 选择器 nth-child 系列和nth-of-type系列区别
weixin_30951389的博客
08-11 102
nth-child是表示选择当前父元素下所有元素中的第几个元素，而nth-of-type则表示选择父元素某一个给定类型的第几个元素， 例如 选择p父元素下的第一个p元素，可以这么写： parent>p:first-child 或者 parent>p:first-of-type，第一种写法在父元素下第一个元素为p时没有什么问题。但是在父元素下第一个元素不是p标签就会...
【CSS3】---only-child选择器+only-of-type选择器
weixin_30429201的博客
04-23 268
only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div clas...
css:伪类：only-child和：only-of-type区别
m0_62381210的博客
10-25 487
nth-child表示只能有自己一个儿子：nth-of-type表示父亲可以有多个不同类型的儿子，但是不能有和自己一样的。
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。...下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。
CSS3中:nth-child和:nth-of-type的区别深入理解
12-13
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很...
详解CSS3选择器:nth-child和:nth-of-type之间的差异
09-24
在CSS3中，选择器:nth-child和:nth-of-type是两种非常有用且经常被混淆的工具，它们用于根据元素的位置和类型来选取特定的元素。理解它们之间的差异对于精确地定位和样式化页面元素至关重要。 首先，让我们深入了解...
通俗辨析伪类选择器中child型与type型
qq_55368677的博客
03-20 379
通俗辨析伪类选择器中child型与type型
详解：9only-child only-of-type
qq_37805832的博客
04-25 558
only-child只有一个子元素的css样式 only-of-type只有一个元素的css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="...
css nth-of-type nth-of-child(公式)
HangMine的博客
05-25 1928
知识点:1.nth-of-type公式里的n是从0开始计算2.nth-of-type获取到的元素，是从1开始计算3.如果需要获取或排除前面的元素，用nth-of-type   如果需要获取或排除前面的元素，用nth-last-of-type例子：1.获取前三个：nth-of-type(-n+3),从n=0开始计算，分别得到第3，第2，第1个元素2.获取前三个除外的：nth-of-type(n+4)...
nth-type-of nth-child(n) eq(n)区别
LONGSHAN123456789的博客
09-24 651
nth-child() inex 1-n   nth-type-of() index 1-n     jquery eq:()index 0-n-1          p:nth-child(2) 选择器匹配属于表示这个元素要是p标签，且是第二个子元素       :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。          p:nth-chi
css属性选择器关于-of-type 和-child
impress1234的博客
05-18 504
例：p:only-of-type 当p 的父元素中有且仅有一个p元素时（p的父元素还是允许有其它类型的子元素的），这个p元素被选中例：p:only-child     当p  的父元素中有且仅有一个子元素，且这个子元素是p 时，这个p元素被选中 ...
CSS :only-of-type 选择器
lengqingIT的博客
03-25 334
HTML 用法 <body> <h1>:only-of-type选择器匹配属于同类型中唯一同级元素</h1> <h3>实例:匹配属于同类型中唯一同级元素的p元素的背景颜色<h3> <div><p>www.semi-warm.com</p></div> ​ <div&gt...
css中结构伪类用法（案例）
weixin_43939111的博客
02-01 937
结构伪类有如下几种： :first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type :empty 具体含义解释可以看网上的教程文档，这里只列举直观案例，便于区别理解记忆 一、结构伪类选择的是该种类在其父元素下属于该种类的元素 可以看到背
CSS选择器注意点
chengyao8926的博客
07-27 320
only-child与only-of-type :only-child是一个 CSS 伪选择器，它匹配一个元素，该元素满足： 该元素是其父级唯一孩子； 该元素父级没有其他任何子元素； :only-of-type是一个 CSS 伪选择器，它匹配一个元素，该元素满足： ...
伪类选择器里的唯一（only）
weixin_57446003的博客
07-27 235
一、 only-child:当元素是唯一的子元素，被选择 二、only-of-type:当元素是唯一类型的子元素，被选择 <body> <divclass="box"> <divclass="box1">我是第一个DIV</div> <divclass="box2">我是第一个DIV</div> ...
first-child和first-of-type的区别
liulei21的专栏
09-28 1085
从字面上就很容一理解first-child是结构上的第一个孩子而first-of-type是相同类型的第一个 下面来举例子说明下 &lt;div&gt; &lt;h2&gt;&lt;/h2&gt; &lt;p&gt;&lt;/p&gt;//通过P：first-of-type可以得到这个元素 &lt;p&gt;&lt;/P&gt; &lt;/div&gt; 下面是fir
nth-child和nth-of-type区别
最新发布
03-28
nth-child和nth-of-type是CSS中的伪类选择器，用于选择元素的特定位置。 nth-child选择器选取父元素下的第n个子元素，无论其类型是什么。例如，nth-child(2)选取父元素下的第二个子元素。 nth-of-type选择器选取父元素下特定类型的第n个子元素。例如，nth-of-type(2)选取父元素下第二个与指定类型相同的子元素。 区别： 1. 对于nth-child选择器，它会选择父元素下的所有子元素，并根据位置进行筛选。而nth-of-type选择器只会选择与指定类型相同的子元素。 2. 如果父元素下的子元素中有不同类型的元素，nth-child选择器可能会选择到不同类型的元素，而nth-of-type选择器只会选择指定类型的元素。 3. 当使用nth-child选择器时，如果指定的位置超过了父元素下子元素的数量，将不会匹配任何元素。而nth-of-type选择器只会计算指定类型的子元素。 4. nth-child选择器和nth-of-type选择器都可以使用表达式来选择特定位置的子元素，例如：nth-child(2n+1)表示选择奇数位置的子元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值