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

最新推荐文章于 2024-08-18 22:35:37 发布
爱吃东北大酱的剧作家 最新推荐文章于 2024-08-18 22:35:37 发布
阅读量270 收藏 1
点赞数 2
文章标签： 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表示父亲可以有多个不同类型的儿子，但是不能有和自己一样的

爱吃东北大酱的剧作家
关注 关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 937
先从最不容易理解的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 1213
:only-child 官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式 :only-of-type 官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式 注意： 在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...
详解：9only-child only-of-type
qq_37805832的博客
04-25 519
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伪类：精准定位单一子元素的样式艺术
最新发布
2402_85758349的博客
08-18 575
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。伪类则用于选择唯一的子元素。
CSS :only-child 选择器
lengqingIT的博客
03-25 1118
HTML 用法 <body> <h1>:only-child选择器匹配属于父元素中唯一子元素的元素</h1> <h3>实例:匹配属于父元素中唯一子元素的p元素</h3> <div><p>www.semi-warm.com</p></div> <div><span&gt...
css 使用 :only-child 实现多状态的动态加载动画
朝阳39的博客
12-22 336
需求描述 尤其需要使用:only-child的场景是动态场景，也就是某个固定小模块，根据场景的不同，里面可能是一个子元素，也可能是多个子元素，元素个数不同，布局方式也不同，此时就是:only-child伪类大放异彩的时候。例如，某个加载（loading）模块里面可能就只有一张加载图片，也可能仅仅就是一段加载描述文字，也可能是加载图片和加载文字同时出现，此时:only-child伪类就非常好用。 完整范例 <!-- 1. 只有加载图片 --> <div class="cs-load.
jQuery中:only-child选择器用法实例
10-24
然而，为了使得选择器能够应用到特定元素上，:only-child选择器往往需要与其他选择器组合使用，比如类选择器、元素选择器等。例如，如果想选中所有ul元素下唯一的li元素，并且改变其文字颜色为蓝色，可以使用以下...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
css伪类nth-child，nth-of-type的顺序是怎么计数的呢？
haoyanyu_的博客
07-31 485
今天遇到一个坑 项目中写css时，如果一个容器里有多个子元素，但是子元素的样式并不是完全一样的，稍微有点差异，这个时候一般通过nth-child(n)，或者nth-of-type(n)定制子元素的样式。 那么n是如何计数的呢？ 在这里一直有一个误解，惭愧惭愧～～???? 如下代码 <div class="content"> <p>水平垂直居中， justify-content, align-items</p> <div class="layout allce
css选择器——:only-of-type
Jener
08-11 652
这里介绍:only-of-type选择器的语法 理论： :only-of-type选择器匹配属于同类型中唯一同级元素 p:only-of-type{ color: magenta; } /*匹配属于同类型中唯一同级元素的p元素的字体颜色*/ 以body为直接父级的p元素 第一个p元素 以div为直接父级 第一个p元素 以div为直
only-of-type选择器
09-19 1123
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 示例演示 通过“:only-of-type”选择器来修改容器中仅有一个div元素
【CSS3】---only-child选择器+only-of-type选择器
weixin_30429201的博客
04-23 212
only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div clas...
选择器——:only-child
Jener
08-11 690
这里我们测试下选择器——:only-child 理论：:only-child选择器匹配属于父级中唯一子元素的元素 测试1——body元素中只含有一个p标签 测试二 p:only-child{ color: magenta; } /*匹配属于父级元素中唯一子元素的p元素*/ 以body为直接父级的p元素 第一个p元素 以div为直接父级
(CSS):only-of-type
05-06 165
W3C对该伪类选择器的定义为： :only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 描述一如既往的专业难懂，话不多说，示例讲解 <!DOCTYPE html> <html> <head> <style...
CSS3 only-of-type选择器
weixin_39093202的博客
01-10 322
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。 这样说或许不太好理解，换一种说法。 “:only-of-type”是表示一个元素他有很多个子元素， 而其中只有一种类型的子元素是唯一的， 使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 示例演示 通过“:only-of-type”选择器来修改容器中仅有一个d...
详细分析CSS伪类:only-of-type
Blog of Leviash
07-17 488
2.特定状态下的样式变化：如果在某些特定状态下，你想要为唯一的某个特定类型的标签应用不同于其他同类型标签的样式，:only-of-type 可以帮助你实现这个效果。通过使用 :only-of-type 选择器，你可以确保只有一个该类型的标签应用特定的样式，而其他相同类型的标签不会受到样式的影响。比如上述结构，因为p、span、i都是在div里唯一存在的，就可以用div>p:only-of-type,div>span:only-of-type,div>i:only-of-type来选中三者。
【CSS3】only-child选择器
O(∩_∩)O
02-23 949
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： 我是一个段落 我是一个段落 我是一个段落
only-child选择器
09-19 982
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： 我是一个段落 我是一个段落 我是一个段落
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\] 希望这个...
写文章

热门文章

  • npm ERR code EPERMnpm ERR syscall opennpm ERR path D:\Program Files\nodejs\node_cache\_cacache 3996
  • serve : 无法将“serve”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。所在位置 行:1 字符: 1 3120
  • 点击手机按钮存在APP则唤醒否则打开应用商店 3044
  • vue使用element的table表格表头竖向排布 1571
  • Object.keys()不排序问题 1165

最新评论

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

    CSDN-Ada助手: 恭喜您撰写了第17篇博客！标题“css:伪类：only-child和：only-of-type区别”非常吸引人。对于这两个伪类的区别，您的解析非常清晰。不过，我想提供一些建议，希望对您的下一步创作有所帮助。或许您可以添加一些具体的示例或应用场景，以帮助读者更好地理解这两个伪类的使用方法。此外，您还可以考虑探讨一些其他相关的CSS伪类，以丰富读者的知识。再次恭喜您，期待您未来更多精彩的博客！

  • Object.keys()不排序问题

    是我357: 牛的牛的 还以为我今天改不出来了

最新文章

  • vue绘制中国地图
  • vue中axios请求接口封装
  • vue使用element的table表格表头竖向排布
2023年4篇
2022年12篇
2021年1篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值

玻璃钢生产厂家四川中庭商场美陈费用抽象人物玻璃钢雕塑价格上街区城市玻璃钢雕塑浙江大型商场美陈生产厂家酒店玻璃钢雕塑济南玻璃钢花盆哪里有驻马店市玻璃钢雕塑玻璃钢人物雕塑定做价格欧式玻璃钢仿铜雕塑广州拿罐女神玻璃钢雕塑春天商场美陈门头玻璃钢雕塑凳子多少钱商场美陈的选择玻璃钢雕雕塑流程江门出色的玻璃钢雕塑河南商业商场美陈多少钱泰安卡通玻璃钢雕塑定制异形玻璃钢动物雕塑生产厂家梅州发光小品玻璃钢雕塑现货宿迁玻璃钢人物雕塑商家商场电梯间美陈甘南玻璃钢动物雕塑厂家吉林创意玻璃钢雕塑供应商玻璃钢兔子雕塑图片徐州商场开业美陈亳州玻璃钢雕塑浮雕厂家玻璃钢雕塑景观供应玻璃钢节庆雕塑西宁节日商场美陈玻璃钢雕塑贴吧香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人？张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身！外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫：哈马斯三号人物被杀测试车高速逃费 小米：已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化