随笔之——伪类选择器:nth-child(n) 与 nth-of-type(n)的区别!!!
话不多说!直接正题!!!
一、E:nth-child(n)///选中父元素中第(n)个元素.若第n个元素为E则选中;若第n个不为E则不选中。n可以为2n(偶数)、2n+1(奇数)、等...
二、E:nth-of-type(n)///选中父元素中第(n)个为E的元素。n的取值同上。
三、 举个栗子>>>
(1)下图可以看出两个选择符均可以达到想要的效果;没有什么区别。。。(往下看!)

(2)、下图可以看出两者的区别之处:li:nth-child(2)直接选中父元素中第二个元素 /// li:nth-of-type(2)则是选中父元素中第二个为li的元素。


深呼吸,下面还有。
(3)下面的图可以更加的确定他们的区别之处。。。
在其上多加了span,就出现了不一样的效果,可以看出nth-child受上面的影响很大,而nth-of-type则可以精确的选出来,无论上面添加标签与否///


这样,通过例子,就知道上面一、二两点的意思了!!!
随笔之——伪类选择器:nth-child(n) 与 nth-of-type(n)的区别!!!的更多相关文章
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器(三)之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
随机推荐
- Matlab 编程简介与实例
函数作图 二维平面曲线作图函数 plot(x, y, 's') x, y是长度相同的向量,s表示线型和颜色 如果作多条曲线在同一图上,则用函数: plot(x1, y1, 's1', x2, y2, ...
- 20175314 实验四 Android开发基础
20175314 实验四 Android开发基础 一.实验报告封面 课程:Java程序设计 班级:1753班 姓名:薛勐 学号:20175314 指导教师:娄嘉鹏 实验日期:2019年5月17日 实验 ...
- 2.Metasploit数据库配置及扫描模块介绍
01.Metasploit数据库配置及扫描模块介绍 信息收集 信息收集是渗透测试中首先要做的重要事项之一,目的是尽可能多的查找关于目标的信息,我们掌握的信息越多,渗透成功的机会越大.在信息 ...
- 原地算法(in-place algorithm)
原地算法(in-place algorithm) 在计算机科学中,一个原地算法(in-place algorithm)基本上不需要额外辅助的数据结构,然而,允许少量额外的辅助变量来转换数据的算法.当算 ...
- 独立Web站点的快速部署
独立Web站点的快速部署 1案例1:独立Web站点的快速部署 1.1问题 本 ...
- fastfdfs搭配nginx
fastfdfs搭配nginx 下载fastdfs-nginx-module 模块 wget https://github.com/happyfish100/fastdfs-nginx-module/ ...
- 面向对象核心技术(java)
一.类的封装详解 在“面向对象编程基础(java)”的时候讲过,封装是面向对象编程的核心思想.同时我们也知道类是载体,只不过我们把对象的属性和行为封装在载体中. 现我们用封装的方式来实现,一个顾客去一 ...
- go 格式化输出
一.什么是格式化输出? 二.有哪些符号 普通占位符 占位符 说明 举例 输出 %v 相应值的默认格式. Printf("%v", people) {zhangsan}, %+v 打 ...
- 计算机网络协议,TCP数据报的分析
一.TCP协议的特点 TCP是面向连接的运输层协议:即应用程序在使用TCP协议通信之前,要先建立TCP连接,通信结束后必须释放已建立的TCP连接 每一条TCP连接只能有两个端点:即TCP是点对点(一对 ...
- Python Requests-学习笔记(9)-错误与异常
遇到网络问题(如:DNS查询失败.拒绝连接等)时,Requests会抛出一个ConnectionError 异常. 遇到罕见的无效HTTP响应时,Requests则会抛出一个 HTTPError 异常 ...