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选择器.优先级与 ...
随机推荐
- Linux3.10.0块IO子系统流程(0)-- 块IO子系统概述
前言:这个系列主要是记录自己学习Linux块IO子系统的过程,其中代码分析皆基于Linux3.10.0版本,如有描述错误或不妥之处,敬请指出! 参考书籍:存储技术原理分析--基于Linux 2.6内核 ...
- 关于for循环
1.普通for循环 (遍历数组的索引值(下标),边界可以自己划定) var arr = [10, 20, 30];for(var i=0; i<arr.length; i++) console. ...
- django 1.11 目录
django 信号 django form
- Linux 防火墙:Netfilter iptables
一.Netfilter 简介 (1) Netfilter 是 Linux 内置的一种防火墙机制,我们一般也称之为数据包过滤机制,而 iptables 只是操作 netfilter 的一个命令行工具(2 ...
- Golang--匿名变量
在使用多重赋值时,如果不需要在左值中接收变量,可以使用匿名变量(anonymous variable). 匿名变量的表现是一个下画线_,使用匿名变量时,只需要在变量声明的地方使用下画线替换即可.例如: ...
- 【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 ...
- 如何相互转换逗号分隔的字符串和List【转】
将逗号分隔的字符串转换为List 方法 1: 利用JDK的Arrays类 String str = "a,b,c"; List<String> result = Arr ...
- Cocos2d-js3.3 模态对话框的实现
首先,先了解一下什么是模态对话框,百度百科的给出了下面一个定义: 模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话 ...
- [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 ...
- spring 的web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java ...