css3 :nth-child()选择器的使用
一、nth-child()
1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始。不区分子元素类型。
2. nth-child(odd):父元素下的奇数子元素,等同于:nth-child(2n-1)。区分子元素类型。
3. ntn-child(even):父元素下的偶数子元素,等同于:nth-child(2n)。区分子元素类型。
4. nth-child(an+b):父元素的an+b个子元素,区分子元素类型。
5. first-child:父元素下的第一个子元素,如果第一个子元素不是该类型,选择不到。等同于:nth-child(1)。
6. last-child:父元素下的最后一个子元素,如果最后一个子元素不是该类型,选择不到。
二、nth-of-type()
匹配属于父元素的特定类型的第n个子元素,忽略不是该类型的元素。
css3 :nth-child()选择器的使用的更多相关文章
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- 极客技术专题【008期】:CSS3核心技术:选择器
日期:2013-8-19 来源:GBin1.com 技术专题介绍 技术专题:CSS3核心技术:选择器 专题演讲稿:CSS3选择器 分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 ...
- jQ not()选择器 与 css3 :not( selector )选择器
1.jQ not() 2.css3 not w3c在线演示地址 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...
- css3的nth-child选择器的具体探讨
css3的nth-child选择器的具体探讨 前言 在十年前開始的div+css布局兴起之时,我就開始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,仅仅有ID选择器,CLA ...
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1
要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...
- CSS3的nth-child() 选择器
CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...
- CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...
- JQ表单选择器和CSS3表单选择器
JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...
随机推荐
- LOJ.#6468. 魔法[差分+树状数组]
题意 题目链接 分析 将询问差分并不断加入颜色. 每种颜色,一个位置 \(p\) 都只会走到与之左右相邻的两个位置之一,分类讨论 \(\rm |A-B|\) 的符号. 实现可以使用树状数组. 总时间复 ...
- Error:Could not find common.jar (android.arch.core:common:1.0.0)
Error:Could not find common.jar (android.arch.core:common:1.0.0). Searched in the following location ...
- chrome下的Grunt插件断点调试——基于node-inspector
之前调试grunt插件时,都是通过人肉打log来调试.不仅效率低,而且会产生一堆无用的代码.于是简单google了下node断点调试的方法,总结了下. 借助node-inspector,我们可以通过C ...
- postman 断点
- Scrum Meeting day 1
第一次会议,在这一次的会议中,明确了任务目标,并将任务进行合理分配,并且规划了整个任务的初步计划. No_00:分工情况 姓名 分工 崔强 PM 杜正远 主力工程师 王嘉豪 主力工程师 ...
- Linux内核分析 实验一 ——by王玥
一.实验内容 1)实验部分(以下命令为实验楼64位Linux虚拟机环境下适用,32位Linux环境可能会稍有不同) 使用 gcc –S –o main.s main.c -m32 命令编译成汇编代码, ...
- classpath与clsspath*
classpath是指 WEB-INF文件夹下的classes目录 classes含义: 1.存放各种资源配置文件 eg.init.properties log4j.properties struts ...
- ffmpeg格式转换
遇到有些wav文件在ubuntu下无法打开的情况,可以使用ffmpeg进行格式转换即可 ffmpeg -i 0.wav test.wav
- C#简述(二)
详情请参考:http://www.runoob.com/csharp/csharp-operators.html 1.C# 运算符 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 ...
- PAT 甲级 1094 The Largest Generation
https://pintia.cn/problem-sets/994805342720868352/problems/994805372601090048 A family hierarchy is ...