彻底理解nth-child和nth-of-type的区别。
最近又有些天没写博客了,主要写一篇下来,太浪费时间了,其实这不是根本,根本是最近比较忙,忙什么呢?最近发现一个问题觉得学习速度太慢了,时间倒是花的很多,但大部分时间都花在无意义的事情上,所有打算改变政策,目前已经整理出一套规范,正在测试中,好了不扯那么多,看正题。
为什么要写篇呢,主要是因为之前觉得自己已经理解了nth-of-type
但后来发现好像和自己之前理解的不太一样,于是打算写下来。
nth-child
倒很好理解就是选择第几个,代码如下:
<style>
p:nth-child(2),p:nth-child(7){
color:red;
}
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>
效果如下:
可以看出nth-child
是根据元素的个数来计算的,尽管我们在:nth-child
前面加了p
。这个没啥好说的,但nth-of-type
要是不研究一下还真容易理解错,它说的是按照类型来选择,看下面这个例子。
<style>
p:nth-of-type(1),p:nth-of-type(3){
color:red;
}
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>
效果如下:
这个也不难理解就是按照类型来计算,碰到一个同类型就加1,那你肯定会说既然如此那有什么好说的,关键如果像下面这样呢,如下:
.item:nth-of-type{color:red}
这种情况又是怎么个案类型法?所以今天主要是探讨这个问题。
<style>
.item:nth-of-type(3){
color:red;
}
</style>
<h1>标题</h1>
<p class="item">这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span class="item">这是span</span>
<span class="item">这是span</span>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>
效果如下:
可以看到这里是选中了两个的,不同类型会被当作多类,只要符合选择器规范都会选中,额,好像有点简单哈,主要是这个例子写的太好了。就这样。还是总结一下吧。
总结
nth-child
按照个数来算。nth-of-type
按照类型来计算,如果是class那么碰到不同类型的,单独一类,符合条件的选中。
彻底理解nth-child和nth-of-type的区别。的更多相关文章
- 现代C++之理解模板类型推断(template type deduction)
理解模板类型推断(template type deduction) 我们往往不能理解一个复杂的系统是如何运作的,但是却知道这个系统能够做什么.C++的模板类型推断便是如此,把参数传递到模板函数往往能让 ...
- 简单理解Struts2中拦截器与过滤器的区别及执行顺序
简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...
- 【转】为什么我们都理解错了HTTP中GET与POST的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- Index 和 Type 的区别
原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 深入理解Javascript中构造函数和原型对象的区别
在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...
- 理解Java中字符流与字节流的区别
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...
- 5分钟理解iaas paas saas三种云服务区别
随着云计算的大热,向我咨询云计算相关问题的童鞋也越来越多,其中最近问的比较多的一个问题便是云计算中的pass是什么意思?整好今天有空,统一给大家解释下pass是什么意思?和Iass.Sass之间有什么 ...
- const type& 与 type& 的区别
const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...
随机推荐
- 关于3DSMAX中opensubdiv细分功能的笔记
说到建模和细分,估计用过3dsmax的同学就会心有余悸,每次添加"涡轮平滑"或者"网格平滑"之前,都会下意识的进行保存,没有为啥,就是因为太容易使软件挂掉了. ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 实验二 c语言文法
<程序>-><声明>|<程序><函数> <函数>-><修饰符><标识符><形式参数>< ...
- [RxJava^Android]项目经验分享 --- 异常方法处理
简单介绍一下背景,最近RxJava很火,我也看来学习一下,计划在项目的独立模块中使用它.使用过程中遇到很多问题,在这里记录分享一下.可能有使用不当的地方,大家多多包涵.对于RxJava的基本概念和功能 ...
- Web API 之CRUD
注:例子来自微软Web API官网(https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part ...
- 关于zepto(相似于jquery、jQuery用于网页浏览器,zepto用于手机浏览器)
http://blog.csdn.net/kongjiea/article/details/42522305 -----关于zepto和jquery的差别 jQuery 使用 .width() 和 ...
- 安装WampServer时出现的问题(丢失VCRUNTIME140.dll或MSVCR110.dll)以及解决办法
今天,在安装WampServer时,刚开始提示了"丢失VCRUNTIME140.dll"的问题. 我就网上查了一下,结果大家说是没有安装VC++,然后我就按照网友们提供的网址去下载 ...
- php面向对象中的几个基本定义
面向对象: 面向对象是现代编程中的一种重要设计方法,其基本思想是使用对象,类,封装,继承等来进行程序设计. 对象: 一只猪,一只羊,一辆汽车. 类: 类的主要作用就是创建对象. 封装: 类的特点是将对 ...
- HDU1039-Easier Done Than Said?(字符串处理)
一,题意: 判断三个条件 1:有元音字母 2:不能三个连续元音或辅音 3:不能连续两个相同的字母,除非ee或oo二,思路 写函数一个条件一个条件去判断 #include<iostream> ...
- 思维导图FreeMind
什么是MindMap? MindMap(被译成思维导图或心智图)是一种思维工具,由英国的记忆之父托尼-博赞发明. MindMap是一种新的思维模式,它将左脑的逻辑.顺序.条例.文字.数字,以及右脑的图 ...