html相同标签nth,比较CSS3选择器:nth-child和:nth-of-type之间的区别
本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异,非常具有实用价值,需要的朋友可以参考下
先看一个简单的实例,首先是HTML部分:
我是第1个p标签
我是第2个p标签
然后两个选择器相对应的CSS代码如下:
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色:
尽管上面两个demo的最后效果一致,但是两个选择器之间存在差异是必然的。
对于:nth-child选择器,在简单白话文中,意味着选择一个元素:
1、这是个段落元素
2、这是父标签的第二个孩子元素
对于:nth-of-type选择器,意味着选择一个元素:
1、选择父标签的第二个段落子元素
我们把上面的实例稍作修改,就可以看到这两个选择器之间的差异表现了,如下HTML代码:
我是一个普通的p标签
我是第1个p标签
我是第2个p标签
还是与上面例子一致的CSS测试代码:
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
这时候两个选择器所渲染的结果就不一样了。
p:nth-child(2)其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。
p:nth-of-type(2)的表现显得很坚挺,其把希望渲染的第二个p标签染红了。
html相同标签nth,比较CSS3选择器:nth-child和:nth-of-type之间的区别相关推荐
- CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...
- css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
- CSS3 选择器 基本选择器介绍
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
- css3 选择器_10-CSS3选择器详解
CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. CSS3的现状 浏览器支持程度不够好,有些需要添加私有前缀 移动端支持优于PC端 不 ...
- 爬虫常用Xpath和CSS3选择器对比
爬虫常用Xpath和CSS3选择器对比 1. 简介 CSS是来配合HTML工作的,和Xpath对比起来,CSS选择器通常都比较短小,但是功能不够强大.CSS中的空白符' '和Xpath的'//'都表示 ...
- CSS3 选择器(Selector)
写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. CSS 选择器案例 Body > ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- 前端必须掌握30个CSS3选择器
本文中将综合前端开发中常用的30个CSS3选择器,并且附带了浏览器的支持情况,希望对大家有所帮助. 1.*:通用元素选择器 * { margin:0; padding:0; } *选择器是选择页面上的 ...
- CSS3选择器(选择符)
CSS3选择器分类 本文列举常用的几种选择器 一.层级选择器 E>F 子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素 div>em{ color: red; } HTML ...
最新文章
- Maven最全笔记,99%的人都收藏了!
- linux同步到对象存储,将Cpanel备份配置为S3对象存储的方法
- 学习这门课的一些问题
- android - ADT本地配置、sdk配置
- Visual Studio 2015 安装
- 【数学和算法】插值方法
- C#中的delegate的 Invoke 、BeginInvoke的区别
- 计算机文档vmware安装虚拟机,教你如何用VMware虚拟机安装系统.docx
- 我两年的坚持,值了!
- excel自动导出功能_自动关联数据字典---SpringCloud Alibaba_若依微服务框架改造---工作笔记008
- el-cascader获取label
- ubuntu gedit 工具菜单下没有 Manage external tools
- android tv 蓝牙服务_5款面向Android TV的优秀文件管理器
- ‘javah‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
- Docx4j简单学习
- GTQ服务多层次金融衍生品市场,促进社会经济繁荣
- 织梦有哪些文件需要设置robot的Disallow呢?
- 北京住房公积金提取(取消)指南
- docker-compose up:ERROR: Encountered errors while bringing up the project.报错问题
- DBeaver添加SQLserver数据库提示需要下载驱动