of-type和child的区别

最新推荐文章于 2023-03-20 01:02:06 发布
最新推荐文章于 2023-03-20 01:02:06 发布
阅读量531 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gqomg/article/details/8994817
版权


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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 922
先从最不容易理解的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区别
m0_62381210的博客
10-25 229
nth-child表示只能有自己一个儿子：nth-of-type表示父亲可以有多个不同类型的儿子，但是不能有和自己一样的。
css中结构伪类用法（案例）
weixin_43939111的博客
02-01 861
结构伪类有如下几种： :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 277
only-child与only-of-type :only-child是一个 CSS 伪选择器，它匹配一个元素，该元素满足： 该元素是其父级唯一孩子； 该元素父级没有其他任何子元素； :only-of-type是一个 CSS 伪选择器，它匹配一个元素，该元素满足： ...
nth-type-of nth-child(n) eq(n)区别
LONGSHAN123456789的博客
09-24 593
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 403
例：p:only-of-type 当p 的父元素中有且仅有一个p元素时（p的父元素还是允许有其它类型的子元素的），这个p元素被选中例：p:only-child     当p  的父元素中有且仅有一个子元素，且这个子元素是p 时，这个p元素被选中 ...
详解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也可以。但是它们到底有什么区别呢？ 其实区别很...
css :nth-child与:nth-of-type之小解
09-25
CSS中的`:nth-child()`和`:nth-of-type()`是两种选择器，它们在选取HTML元素时有不同的侧重和行为。本文将详细解析这两个选择器的工作原理及其差异。 `:nth-child()`选择器用于选取父元素中具有特定索引位置的子...
通俗辨析伪类选择器中child型与type型
qq_55368677的博客
03-20 256
通俗辨析伪类选择器中child型与type型
css nth-of-type nth-of-child(公式)
HangMine的博客
05-25 1811
知识点: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-of-type（n）和：nth-child（n）的基友关系
热门推荐
黑小Amui的博客
05-22 1万+
一开始写样式的时候喜欢全部元素都来个class，后面发现这样一个页面下来很多个class，起名字起到发慌，然后老师说该多用 逻辑关系来写样式，就是这种第几个孩子啊这种，不知道你们有没有这种烦恼，要用的时候觉得哇，type和child这两个傻傻难分。。。好了，入正题，其实可以从表面窥视到这两人的”内心“，且称他们为type先生和child先生，他们都以自己为重，顾名思义，type先生会关注type类...
first-child和first-of-type的区别
liulei21的专栏
09-28 1020
从字面上就很容一理解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
CSS选择器 first-child 、first-of-type 和 nth-of-type()
erciyuan_nuonuo的博客
12-11 3164
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。 first-child:选择器用于选取属于其父元素的首个子元素的指定选择器 first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素 nth-of-type(x):选择器匹配属于其父
CSS：好玩的‘伪类’系列之——(:only-child与:only-of-type)
gavincz的博客
04-30 1179
:only-child 官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式 :only-of-type 官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式 注意： 在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...
nth-child,nth-of-type,first-of-type,last-of-type,nth-last-of-type,only-of-type等的区别
hongyu_lin的博客
11-14 1831
*-child和*-of-type分别有五个前缀，即：nth，nth-last，first，last，only。 其中nth和nth-last需要传入参数，即第n元素的n值。 first前缀等同于nth前缀传入参数1，last前缀等同于nth-last传入参数1。 即first-child和nth-child(1)等同，first-of-type和nth-of-type(1)等同，last-
:only-child和:only-of-type选择器的比较
04-03 1071
:only-child 当元素是唯一的子元素，被选择。 HTML代码： <body> <div class="x"> <div>第一个DIV</div> <div>第一个DIV</div> <p>第一个P</p> </div> </body> ...
详解：9only-child only-of-type
qq_37805832的博客
04-25 510
only-child只有一个子元素的css样式 only-of-type只有一个元素的css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="...
css选择器nth-child和nth-of-type区别（学不会来打我）
m0_47659279的博客
08-25 468
nth-child：先根据位置找到元素，再看该元素的选择器是否符合 nth-of-type：先找出符合选择器的所有元素，将它们根据不同的标签进行分类，再选中每个分类中位置符合的元素
nth-child和nth-of-type区别
最新发布
03-28
nth-child和nth-of-type是CSS中的伪类选择器，用于选择元素的特定位置。 nth-child选择器选取父元素下的第n个子元素，无论其类型是什么。例如，nth-child(2)选取父元素下的第二个子元素。 nth-of-type选择器选取父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值