CSS选择器 nth-child 和 nth-of-type
Css 3 中两个新的选择器 nth-child 和 nth-of-type 都可以选择父元素下对应的子元素,但它们到底有什么区别呢?
:nth-child(n) 选择器匹配属于其父元素下的第n个子元素,不论元素的类型。
:nth-of-type(n) 结构性伪类选择器,匹配父元素下使用同种标签的第n项子元素,它的选择范围是父元素下某一种元素类型的集合。
例如:
p:nth-child(2) 表示这个元素是p标签,并且是第二个子元素,两个条件必须满足
p:nth-of-type(2) 表示父标签下的第二个p元素,无论其前后有几个标签
nth-child 的用法:
:nth-child(n) 选取第n个标签,“n”表示从整数,下同,“n是你想要的数字”
:nth-child(n+4) 选取大于等于4标签,
:nth-child(-n+4) 选取小于等于4标签,
:nth-child(2n) 选取偶数标签,等同于 :nth-child(even)
:nth-child(2n-1) 选取奇数标签,等同于 :nth-child(odd)
:nth-child(3n+1) 隔二取一,每隔两个元素选取一个
:last-child 选取最后一个标签
:nth-last-child(n) 选取倒数第几个标签,
:nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素
nth-child(n+2):nth-child(odd):nth-child(-n+9) 选中第2位到第9位,并且为奇数的
:first-child 和 :last-child 被IE 7支持,但是知道IE9才支持剩下的选择器。如果你担心 IE,可以使用 Selectivizr。
CSS选择器 nth-child 和 nth-of-type的更多相关文章
- css选择器学习(一)
1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
- CSS选择器分类总结
一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...
- css selector regexp css选择器 正则表达式 css 参考手册
jQuery 选择元素 a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...
- CSS 选择器简介
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...
- CSS选择器,优先级的总结
CSS选择器 css选择器种类 基本选择器: 通配符选择器 * id选择器 #id 类选择器 .className 元素选择器 E 元素后代选择器 E F 子元素选择器 E > F 相邻兄弟元 ...
- CSS选择器大全48式
00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
随机推荐
- 如何将本地大文件通过终端上传到linux服务器
第一种方式: SecureCRT下 上传文件只需在shell终端仿真器中输入命令“rz”,即可从弹出的对话框中选择本地磁盘上的文件,利用Zmodem上传到服务器当前路径下. 下载文件只需在s ...
- Redis入门到高可用(二十)——Redis Cluster
一.呼唤集群 二.数据分布概论 三.哈希分布 1.节点取余 2.一致性哈希 添加一个node5节点时,只影响n1和n2之间的数据 3.虚拟槽分区 四.基本架构 五.redis clust ...
- gzframework demo搭建
感谢框架作者,这里给出他的博客 http://www.cnblogs.com/GarsonZhang/ 背景:由于作者对代码的持续开发,导致了以前博客中的下载地址和构建方法和目前的项目不对应,这里给出 ...
- [js]js中事件的3要素
js中事件的3要素 事件源 事件 事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta ...
- react 中的return 什么时候用小括号,什么时候用大括号啊
return( <div>....</div> ) return( <Component/> ) return{...} 1:html 2:react 组件 3:j ...
- 前端JS常见面试题(代码自撸)
题目一示例: 适用于子数组等长度及不等长度. let arr = [ [1,2,3], [5,6,7,8], [9,10,11,12,13] ] function arrayDiagonal(arr) ...
- linux下目录的作用
FHS针对目录树架构仅定义出三层目录底下应该放置什么数据而已,分别是底下这三个目录的定义: / (root, 根目录):与开机系统有关: /usr (unix software resource):与 ...
- COM中参数标识
- 使用freemarker和itext把html转pdf
1.把html转pdf,首先必须要解决中文显示问题,CSS样式问题以及可能的JS问题,先上例子,自己去体会. 2.先去下载simsun.ttc字体: 2.demo.html <!DOCTYPE ...
- OAuth 2.0之授权码模式
转载自:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth 2.0授权码模式 授权码模式(authorization code)是功 ...