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的更多相关文章

  1. css选择器学习(一)

    1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  3. CSS选择器分类总结

    一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...

  4. css selector regexp css选择器 正则表达式 css 参考手册

    jQuery 选择元素  a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...

  5. CSS 选择器简介

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...

  6. CSS选择器,优先级的总结

    CSS选择器 css选择器种类 基本选择器: 通配符选择器 * id选择器 #id 类选择器 .className 元素选择器 E 元素后代选择器  E F 子元素选择器 E > F 相邻兄弟元 ...

  7. CSS选择器大全48式

    00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...

  8. html学习第二天—— 第八章—— CSS选择器

    标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...

  9. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  10. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

随机推荐

  1. Linux3.10.0块IO子系统流程(0)-- 块IO子系统概述

    前言:这个系列主要是记录自己学习Linux块IO子系统的过程,其中代码分析皆基于Linux3.10.0版本,如有描述错误或不妥之处,敬请指出! 参考书籍:存储技术原理分析--基于Linux 2.6内核 ...

  2. 关于for循环

    1.普通for循环 (遍历数组的索引值(下标),边界可以自己划定) var arr = [10, 20, 30];for(var i=0; i<arr.length; i++) console. ...

  3. django 1.11 目录

    django 信号 django form

  4. Linux 防火墙:Netfilter iptables

    一.Netfilter 简介 (1) Netfilter 是 Linux 内置的一种防火墙机制,我们一般也称之为数据包过滤机制,而 iptables 只是操作 netfilter 的一个命令行工具(2 ...

  5. Golang--匿名变量

    在使用多重赋值时,如果不需要在左值中接收变量,可以使用匿名变量(anonymous variable). 匿名变量的表现是一个下画线_,使用匿名变量时,只需要在变量声明的地方使用下画线替换即可.例如: ...

  6. 【Common】NO.81.Note.1.Common.1.001-【各种英文符号的表示及念法】

    1.0.0 Summary Tittle:[Common]NO.81.Note.1.Common.1.001-[各种英文符号的表示及念法] Style:Common Series:Common Sin ...

  7. 如何相互转换逗号分隔的字符串和List【转】

    将逗号分隔的字符串转换为List 方法 1: 利用JDK的Arrays类 String str = "a,b,c"; List<String> result = Arr ...

  8. Cocos2d-js3.3 模态对话框的实现

    首先,先了解一下什么是模态对话框,百度百科的给出了下面一个定义: 模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话 ...

  9. [macOS] error when brew updating

    I want to update the brew, then run brew update but unluckly, i got these error /usr/local/Library/b ...

  10. spring 的web.xml

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java ...