<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

  li:nth-child(2) {

color:red;

}

选择器:

li:nth-of-type(2){

color:red;

}

显示的效果

这个时候  li:nth-child(2) 与  li:nth-of-type(2) 选择的是同一个 显示的效果是一样的

但............

因为没有选择到任何东西,所有这个时候 li:nth-child(2)  失效了

   选择是的 第二个li 元素   这个时候就看出来 nth-child 与 nth-of-type  这两个选择器的区别了

选择器 nth-child和 nth-of-type的区别的更多相关文章

  1. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  2. const type& 与 type& 的区别

    const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...

  3. form表单重复提交,type=“button”和type=“submit”区别

    公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...

  4. 关于CSS各种选择器,还有各种引入样式表的区别,import导入样式表,在介绍一些伪类选择器

    (一)CSS选择器: 1.标签选择器:通过HTML的标签名直接选择该标签 2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器:通过#选择器的名称{} 来对添加 ...

  5. from中buttone 和 input type="button" 区别

    在做一个表单提交时碰到的问题, 1.js判断阻止表单提交,如果是form 里面的button的话,恭喜你,你要再换个写法了.<button type="submit" ... ...

  6. Html中,id、name、class、type的区别

    <input type="text" name="name" id="name" class="txt"> ...

  7. isinstance与type的区别

    1.isinstance()内置函数 python中的isinstance()函数是python的内置函数,用来判断一个函数是否是一个已知类型.类似type. 2.用法: isinstance(obj ...

  8. linux 命令中的find locate whereis which type 使用区别

    find 最强大,但参数也较多,需指定查找目录,如 find / -name “filename” locate 是一个快速查找命令,有预先索引好的数据库,由于数据库是定时更新,因此,结果上可能会有迟 ...

  9. python isinstance()与type()的区别

    例如在继承上的区别: isinstance() 会认为子类是一种父类类型,考虑继承关系. type() 不会认为子类是一种父类类型,不考虑继承关系. class A: pass class B(A): ...

  10. jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [IR课程笔记]Page Rank

    主要目的: 在网络信息检索中,对每个文档的重要性作出评价. Basic Idea: 如果有许多网页链接到某一个网页,那么这个网页比较重要. 如果某个网页被一个权重较大的网页链接,那么这个网页比较重要. ...

  2. [bzoj1002] [FJOI2007]轮状病毒轮状病毒(基尔霍夫矩阵)

    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子 和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下 ...

  3. jquery特效(8)—倒计时

    最近公司在做一个答题的小游戏,每道题可以有20秒时间作答,超过时间就要给出相应的提醒,由于20秒时间太长,不适合做GIF动态图,下面来看一下我写的5秒倒计时的测试程序结果: 一.主体程序: <! ...

  4. 青岛理工ACM交流赛 J题 数格子算面积

    数格子算面积 Time Limit: 1000MS Memory limit: 262144K 题目描述 给你一个多边形(用’\’和’/’表示多边形的边),求多边形的面积. 输入  第一行两个正整数h ...

  5. awk 根据外部变量匹配某一域值

    shell>> i='a' awk '$1 ~ /'$i'/ {print $0}' test.txt awk中,变量 增加单引号即可

  6. Django_model基础

    Django-model基础   ORM 映射关系: 表名 <-------> 类名 字段 <-------> 属性 表记录 <------->类实例对象 创建表( ...

  7. uglifyjs2全局混淆

    从git克隆uglifyjs2源码后,进入目录: npm link 编译并安装uglifyjs2成功,就可以直接调用uglifyjs命令了.但是在进行全局混淆时出现了问题,虽然指定了文件topvar. ...

  8. PS 图像滤镜— — USM 锐化

    这个算法的原理很简单,就是先用高斯模糊获取图像的低频信息,然后用原图减去高斯模糊之后的图,得到图像的高频信息,再将原图与高频信息融合,进一步增强原图的高频信息,看起来,图像的边缘显得特别的sharp. ...

  9. [SPOJ1557] Can you answer these queries II

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2482 [算法] 线段树维护历史最值 时间复杂度 : O(NlogN) [代码] #i ...

  10. JavaScript-Tool:validate.js-un

    ylbtech-JavaScript-Tool:validate.js 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. http://validatejs. ...