css:伪类：only-child和：only-of-type区别

于 2023-10-25 11:59:55 发布
阅读量185 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62381210/article/details/134031474
版权

官方解释：

:only-child

官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式

:only-of-type

官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式

看官方解释可能不太明白，但是看一下例子就明白了

：nth-child表示只能有自己一个儿子

：nth-of-type表示父亲可以有多个不同类型的儿子，但是不能有和自己一样的

爱吃东北大酱的剧作家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 899
先从最不容易理解的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 1155
:only-child 官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式 :only-of-type 官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式 注意： 在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...
HTML5&CSS3网页制作：结构化伪类选择器.pptx
05-31
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-last-of-type(n)选择器;:empty选择器;:target选择器;总结;;THANKS
USB 3.0 Type-C测试板原理图PCB
最新发布
10-28
USB 3.0 Type-C测试板原理图PCB，支持DP
【CSS3】---only-child选择器+only-of-type选择器
weixin_30429201的博客
04-23 184
only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div clas...
伪类选择器里的唯一（only）
weixin_57446003的博客
07-27 185
一、 only-child:当元素是唯一的子元素，被选择 二、only-of-type:当元素是唯一类型的子元素，被选择 <body> <divclass="box"> <divclass="box1">我是第一个DIV</div> <divclass="box2">我是第一个DIV</div> ...
CSS :only-child 选择器
lengqingIT的博客
03-25 1085
HTML 用法 <body> <h1>:only-child选择器匹配属于父元素中唯一子元素的元素</h1> <h3>实例:匹配属于父元素中唯一子元素的p元素</h3> <div><p>www.semi-warm.com</p></div> <div><span&gt...
CSS3选择器（详细！全！）
FishC的博客
11-17 6902
CSS3选择器（详细！全！）
这 30 类 CSS 选择器，你必须理解！
weixin_30735745的博客
03-12 371
　　CSS 选择器是一种模式，用于选择需要添加样式的元素。平时使用最多也是最简单的就是 #id、.class 和标签选择器，在 CSS 中还有很多更加强大更加灵活的选择方式，尤其是在 CSS3 中，增加了很多新的选择器，使得选择元素更加便捷，所以必须理解这些选择器，只有先理解了，多用几次，自然而然就记住了。 1、* 【CSS2】 　　通配符，选择页面所有元素。 1 *{ 2 m...
css中结构伪类用法（案例）
weixin_43939111的博客
02-01 853
结构伪类有如下几种： :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 具体含义解释可以看网上的教程文档，这里只列举直观案例，便于区别理解记忆 一、结构伪类选择的是该种类在其父元素下属于该种类的元素 可以看到背
css3 伪类选择器快速复习小结
01-19
前言 如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择... only-of-type nth-child nth-last-child nth-of-type nth-last-of-type first-child & las
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
jquery-1.1.3 效率提高800%
07-21
<br>$("div#foo\\.bar")Inequality Selector: While this selector isn’t part of the CSS specification, it’s frequently used and included in other selector libraries, so we decided to add it in: ...
HTML5/CSS餐厅练习.rar
04-22
plate:only-of-type(6n+3),plate:only-of-type(6n+5) plate元素下的第3个和第5个元素 第二十三关 plate apple.small:only-of-type plate元素下满足apple.small元素的唯一一个元素 第二十四关 orange.small:last-of...
CSS选择器注意点
chengyao8926的博客
07-27 264
only-child与only-of-type :only-child是一个 CSS 伪选择器，它匹配一个元素，该元素满足： 该元素是其父级唯一孩子； 该元素父级没有其他任何子元素； :only-of-type是一个 CSS 伪选择器，它匹配一个元素，该元素满足： ...
详解：9only-child only-of-type
qq_37805832的博客
04-25 505
only-child只有一个子元素的css样式 only-of-type只有一个元素的css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="...
css 使用 :only-child 实现多状态的动态加载动画
朝阳39的博客
12-22 309
需求描述 尤其需要使用:only-child的场景是动态场景，也就是某个固定小模块，根据场景的不同，里面可能是一个子元素，也可能是多个子元素，元素个数不同，布局方式也不同，此时就是:only-child伪类大放异彩的时候。例如，某个加载（loading）模块里面可能就只有一张加载图片，也可能仅仅就是一段加载描述文字，也可能是加载图片和加载文字同时出现，此时:only-child伪类就非常好用。 完整范例 <!-- 1. 只有加载图片 --> <div class="cs-load.
of-type和child的区别
gqomg的专栏
05-30 518
nth-of-type,nth-last-of-type 先排除非指定标签再进行排序 nth-child,nth-last-child不排除非指定标签进行排序 only-of-type 不允许包含非指定标签 only-child 允许包含非指定标签 但只能有唯一指定标签  first-child,last-child 第一个必须是指定标签才有效， first-
:only-child和:only-of-type选择器的比较
04-03 1055
:only-child 当元素是唯一的子元素，被选择。 HTML代码： <body> <div class="x"> <div>第一个DIV</div> <div>第一个DIV</div> <p>第一个P</p> </div> </body> ...
css last-child
07-27
另外，CSS中还有其他一些伪类选择器，如:first-child、:only-child、:only-of-type、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)和:nth-last-of-type(n)等，它们可以用来选择不同的子元素。\[2\] 希望这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值