:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别

:nth-child(n) 是选择父元素的第n个子元素。 
:nth-of-type(n) 是选择父元素的第n个同类型的子元素

举个例子:

<div class="read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!-- 设为红色 -->
</div>
/* nth-child */
.read p:nth-child(3) {color: red;
}

结果:

/* nth-of-type */
.read p:nth-of-type(2) {color: red;
}

结果同上图;

.read p:nth-child(2) 选择的是父元素.read第2个子元素,且是p元素。(先找第2个,再找是不是p) 
.read p:nth-of-type(2) 则是选择父元素.read第2个为p的子元素。(先找p,再找第2个)

重点就在.read是其父元素,且父元素类是怎么构成的。

其他就不多举例BB了,这方面出现问题不符合预期,就重点关注伪类元素的父元素!

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css3 box-shadow阴影(内外阴影与发光)讲解

基础说明&#xff1a; 外阴影&#xff1a;box-shadow: X轴 Y轴 Rpx color; 属性说明&#xff08;顺序依次对应&#xff09;&#xff1a; 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值&#xff08;大小&#xff09; 阴影的颜色 内阴影&#xff1a;b…

远程链接错误:这可能是由于credssp加密oracle修正

此错误解决办法 1.WinR 输入regedit打开注册表 找到对应的以下目录HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System 此时如果System下没有CredSSP时创建CredSSP没有Parameters时,创建Parameters 创建方法:右建>>新建>>项 2.在Para…

SpringBoot入门最详细教程

https://www.jianshu.com/p/af3d5800f763 网上有很多springboot的入门教程&#xff0c;自己也因为项目要使用springboot&#xff0c;所以利用业余时间自学了下springboot和springcloud&#xff0c;使用下来发现springboot还是挺简单的&#xff0c;体现了极简的编程风格&#xf…

通过Vue CLI3 快速创建Vue项目并部署到tomcat

1、前提 首先你要安装好nodejs和yarn,直接在官网下载安装包&#xff0c;一键安装即可&#xff0c;不需要什么环境配置&#xff0c;我安装的是最新版本&#xff08;node-v10.13.0、yarn-1.12.3&#xff09; 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3&#x…

简述区块链(1)- 也许只有这一篇

一、唠叨两句 最近一直在考虑一个事情&#xff0c;就是怎么给不太了解技术的人讲清楚区块链。我先试着写下来&#xff0c;然后在逐步打磨吧&#xff0c;目标就是让哪些说看区块链看的云里雾里的同学能对区块链有一些认知。 二、定义 简单的给区块链下个定义&#xff1a;基于加密…

Vue CLI 3.0脚手架如何在本地配置mock数据json

前后端分离的开发模式已经是目前前端的主流模式&#xff0c;至于为什么会前后端分离的开发我们就不做过多的阐述&#xff0c;既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中&#xff0c;由于后台接口的没有完成或者没有稳定之前我们都是采用…

python 通过下载包setup.py安装模块

下载安装包&#xff0c;并解压到相应的位置 1、打开cmd 2、到达安装目录 3、python setup.py build 4、python setup.py install 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207340.html

Anaconda3自带jupyter

1、cmd命令行中输入 JupyterNotebook 2、系统自动调起下面页面&#xff08;注册端口冲突是打不开的&#xff09; 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207385.html

理解Shadow DOM

1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢&#xff1f;可以理解为一般情况下使用肉眼看不到的DOM结构&#xff0c;那如果一般情况下看不到的话&#xff0c;那也就是说我们无法直接控制操纵的DOM结构。 Shadow DOM 它是HTML的一…

046 实例11-自动轨迹绘制

目录 一、"自动轨迹绘制"问题分析1.1 问题分析1.2 自动轨迹绘制二、"自动轨迹绘制"实例讲解2.1 自动轨迹绘制2.2 数据接口定义2.3 数据文件三、"自动轨迹绘制"举一反三3.1 理解方法思维3.2 应用问题的扩展一、"自动轨迹绘制"问题分析 …

python 操作 elasticsearch-7.0.2 遇到的问题

错误一&#xff1a;TypeError: search() got an unexpected keyword argument doc_type&#xff0c;得到不预期外的参数 解决方法&#xff1a;elasticsearch7里不用文档类型&#xff0c;所以去掉 doc_typecredit_data 错误二&#xff1a;RequestError(400, illegal_argument_ex…

Java生鲜电商平台-订单中心服务架构与异常订单逻辑

Java生鲜电商平台-订单中心服务架构与异常订单逻辑 订单架构实战中阐述了订单系统的重要性&#xff0c;并从订单系统的信息架构和流程上对订单系统有了总体认知&#xff0c;同时还穿插着一些常见的订单业务规则和逻辑。上文写到订单的拆单部分时搁置了&#xff0c;现在接上文继…

Vuex的全面用法总结

1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起&#xff0c;集中式来管理。需要声明的是&#xff0c;这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧&#xff0c;如果不懂…

vue中通过第三方代理解决跨域问题

最近在学node&#xff0c;遇到了跨域的问题&#xff0c;来记录下方法 首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的细节不多说&#xff0c;今天主要说跨域 的问题 左侧为服务端项目结构&#xff0c;www为可执行文件&am…

Java生鲜电商平台-生鲜供应链(采购管理)

Java生鲜电商平台-生鲜供应链(采购管理) 在生鲜供应链系统中采购中心这一模块&#xff0c;它是电商公司管理采购的模块&#xff0c;包含供应商管理&#xff0c;采购订单管理&#xff0c;采购商品管理&#xff0c;在该模块中采购订单是采购中心的核心模块。在其他的比如供应商的…

链式调用setTimeout()与setInterval()的区别

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的&#xff0c;因为在页面的生命周期中&#xff0c;不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的…

如何让Element UI的Message消息提示每次只弹出一个

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示&#xff0c;但是公司的测试人员在进行测试时会一直点&#xff0c;然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况&#xff08;毕竟客户不会闲着没事一直点点点&…

css3实现科技感的呼吸灯效果

呼吸灯效果是一种常见的灯光效果&#xff0c;比如网页的按钮&#xff0c;现实生活中比如电脑的开机按钮。 使用CSS3的animation方法可以实现很多迷人的网页动画特效。 使用CSS3 配合box-shadow即可实现类似的效果 样式代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18…

百度Echarts折线图tooltip里数据添加单位

option {title: {text: 折线图堆叠},tooltip: {trigger: axis,//在这里设置formatter: {a0}:{c0}万},legend: {data:[邮件营销,联盟广告,视频广告,直接访问,搜索引擎]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxi…

VUE组件 之 Drawer 抽屉

一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template><div class"drawer"><div :class"maskClass" click"closeByMask"></div><div :class"mainClass"…